@xh/hoist 59.4.0 → 59.5.0

package/CHANGELOG.md

@@ -1,11 +1,25 @@
 # Changelog
 
+## 59.5.0 - 2023-12-11
+
+### 🎁 New Features
+
+* Added new `dialogWidth` and `dialogHeight` configs to `DockViewModel`.
+
+### 🐞 Bug Fixes
+
+* Fixed serialization of expand/collapse state within `AgGridModel`, which was badly broken and
+  could trigger long browser hangs for grids with > 2 levels of nesting and numeric record IDs.
+* Fixed `UniqueAggregator` to properly check equality for `Date` fields.
+* Pinned `react-grid-layout@1.4.3` to avoid v1.4.4 bugs affecting `DashCanvas` interactions
+  (see https://github.com/react-grid-layout/react-grid-layout/issues/1990).
+
 ## 59.4.0 - 2023-11-28
 
 ### 💥 Breaking Changes
 
 * The constructors for `ColumnGroup` no long accept arbitrary rest (e.g `...rest`)
-arguments for applying app-specific data to the object. Instead, use the new `appData` property.
+  arguments for applying app-specific data to the object. Instead, use the new `appData` property.
 
 ### ⚙️ Technical
 

package/appcontainer/AppStateModel.ts

@@ -34,7 +34,7 @@ export class AppStateModel extends HoistModel {
     @action
     setAppState(nextState: AppState) {
         if (this.state !== nextState) {
-            this.logDebug(`AppState change: ${this.state} → ${nextState}`);
+            this.logDebug(`AppState change`, `${this.state} → ${nextState}`);
         }
         this.state = nextState;
     }

package/cmp/ag-grid/AgGridModel.ts

@@ -19,7 +19,7 @@ import {
     isEqual,
     isNil,
     partition,
-    set,
+    setWith,
     startCase
 } from 'lodash';
 import {GridSorter, GridSorterLike} from '../grid/GridSorter';
@@ -466,8 +466,12 @@ export class AgGridModel extends HoistModel {
         this._prevSortBy = sortBy;
     }
 
-    /** @returns the current row expansion state of the grid in a serializable form. */
-    getExpandState(): any {
+    /**
+     * @returns the current row expansion state of the grid in a serializable form.
+     *      Returned object has keys for StoreRecordIds of top-level, expanded records and values
+     *      of either `true` or an object with keys of StoreRecordIds of expanded child records.
+     */
+    getExpandState(): PlainObject {
         this.throwIfNotReady();
 
         const expandState = {};
@@ -486,8 +490,10 @@ export class AgGridModel extends HoistModel {
                     return;
                 }
 
+                // Note use of setWith + customizer - required to ensure that nested nodes are
+                // serialized as objects - see https://github.com/xh/hoist-react/issues/3550.
                 const path = this.getGroupNodePath(node);
-                set(expandState, path, true);
+                setWith(expandState, path, true, () => ({}));
             }
         });
 
@@ -498,7 +504,7 @@ export class AgGridModel extends HoistModel {
      * Sets the grid row expansion state
      * @param expandState - grid expand state retrieved via getExpandState()
      */
-    setExpandState(expandState: any) {
+    setExpandState(expandState: PlainObject) {
         this.throwIfNotReady();
 
         const {agApi} = this;

package/cmp/grid/Grid.ts

@@ -634,9 +634,8 @@ export class GridLocalModel extends HoistModel {
         let transaction = null;
         if (prevCount !== 0) {
             transaction = this.genTransaction(newRs, prevRs);
-            this.logDebug(this.transactionLogStr(transaction));
-
             if (!this.transactionIsEmpty(transaction)) {
+                this.logDebug(...this.genTxnLogMsgs(transaction));
                 agApi.applyTransaction(transaction);
             }
         } else {
@@ -698,10 +697,13 @@ export class GridLocalModel extends HoistModel {
         return isEmpty(t.update) && isEmpty(t.add) && isEmpty(t.remove);
     }
 
-    transactionLogStr(t) {
-        return `[update: ${t.update ? t.update.length : 0} | add: ${
-            t.add ? t.add.length : 0
-        } | remove: ${t.remove ? t.remove.length : 0}]`;
+    private genTxnLogMsgs(t): string[] {
+        const {add, update, remove} = t;
+        return [
+            `update: ${update ? update.length : 0}`,
+            `add: ${add ? add.length : 0}`,
+            `remove: ${remove ? remove.length : 0}`
+        ];
     }
 
     //------------------------

package/cmp/grid/impl/Utils.ts

@@ -19,7 +19,7 @@ export function managedRenderer<T extends ColumnRenderer | GroupRowRenderer>(
         try {
             return fn.apply(null, arguments);
         } catch (e) {
-            console.warn(`Renderer for '${identifier}' has thrown an error.`, e);
+            console.warn(`Renderer for '${identifier}' has thrown an error`, e);
             return '#ERROR';
         }
     } as unknown as T;

package/cmp/relativetimestamp/RelativeTimestamp.ts

@@ -20,7 +20,7 @@ import {fmtCompactDate, fmtDateTime} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {DAYS, HOURS, LocalDate, SECONDS} from '@xh/hoist/utils/datetime';
-import {withDefault} from '@xh/hoist/utils/js';
+import {logWarn, withDefault} from '@xh/hoist/utils/js';
 
 interface RelativeTimestampProps extends HoistProps, BoxProps {
     /**
@@ -231,7 +231,10 @@ function doFormat(timestamp: Date | number, opts: RelativeTimestampOptions): str
 
     // 1) Degenerate cases
     if (isFuture && !allowFuture) {
-        console.warn(`Unexpected future date provided for timestamp: ${elapsed}ms in the future.`);
+        logWarn(
+            `Unexpected future date provided for timestamp: ${elapsed}ms in the future.`,
+            RelativeTimestamp
+        );
         return '[????]';
     }
 

package/cmp/zoneGrid/ZoneGridModel.ts

@@ -620,7 +620,7 @@ export class ZoneGridModel extends HoistModel {
                 ret[zone] = this.parseZoneMapping(zone, rawMapping);
             } catch (e) {
                 if (strict) throw e;
-                console.warn(e.message);
+                this.logWarn(e.message);
                 ret[zone] = this._defaultState.mappings[zone];
             }
         });

package/core/HoistBase.ts

@@ -140,12 +140,12 @@ export abstract class HoistBase {
     addReaction(...specs: ReactionSpec<any>[]): IReactionDisposer | IReactionDisposer[] {
         const disposers = specs.map(s => {
             if (!s) return null;
-            let {track, when, run, debounce, ...opts} = s;
+            let {track, when, run, debounce, ...rest} = s;
             throwIf(
                 (track && when) || (!track && !when),
                 "Must specify either 'track' or 'when' in addReaction."
             );
-            opts = parseReactionOptions(opts);
+            const opts = parseReactionOptions(rest);
             run = bindAndDebounce(this, run, debounce);
 
             const disposer = track ? mobxReaction(track, run, opts) : mobxWhen(when, run, opts);
@@ -267,9 +267,10 @@ export abstract class HoistBase {
                 run: data => provider.write(data)
             });
         } catch (e) {
-            console.error(
+            this.logError(
                 `Failed to configure Persistence for '${property}'.  Be sure to fully specify ` +
-                    `'persistWith' on this object or in the method call.`
+                    `'persistWith' on this object or in the method call`,
+                e
             );
         }
     }
@@ -293,7 +294,7 @@ export abstract class HoistBase {
 /**
  * Object containing options accepted by MobX 'reaction' API as well as arguments below.
  */
-export type ReactionSpec<T = any> = IReactionOptions<T, any> & {
+export interface ReactionSpec<T = any> extends Omit<IReactionOptions<T, any>, 'equals'> {
     /**
      * Function returning data to observe - first arg to the underlying reaction() call.
      * Specify this or `when`.
@@ -314,7 +315,7 @@ export type ReactionSpec<T = any> = IReactionOptions<T, any> & {
 
     /** Specify a default from {@link comparer} or a custom comparer function. */
     equals?: keyof typeof comparer | IEqualsComparer<T>;
-};
+}
 
 /**
  * Object containing options accepted by MobX 'autorun' API as well as arguments below.

package/core/HoistBaseDecorators.ts

@@ -6,7 +6,7 @@
  */
 import {cloneDeep, isUndefined} from 'lodash';
 import {wait} from '../promise';
-import {throwIf} from '../utils/js';
+import {logError, throwIf} from '../utils/js';
 import {HoistBaseClass, PersistenceProvider, PersistOptions} from './';
 
 /**
@@ -66,9 +66,10 @@ function createPersistDescriptor(
         '@persist decorator should be applied to an instance of HoistBase'
     );
     if (descriptor.get || descriptor.set) {
-        console.error(
+        logError(
             `Error defining ${property} : @persist or @persistWith should be defined closest ` +
-                `to property, and after mobx annotation e.g. '@bindable @persist ${property}'`
+                `to property, and after mobx annotation e.g. '@bindable @persist ${property}'`,
+            target
         );
         return descriptor;
     }
@@ -89,9 +90,13 @@ function createPersistDescriptor(
                 });
             });
         } catch (e) {
-            console.error(
-                `Failed to configure Persistence for '${property}'.  Be sure to fully specify ` +
-                    `'persistWith' on this object or annotation.`
+            logError(
+                [
+                    `Failed to configure Persistence for '${property}'.  Be sure to fully specify ` +
+                        `'persistWith' on this object or annotation`,
+                    e
+                ],
+                target
             );
         }
 

package/core/HoistComponent.ts

@@ -282,9 +282,7 @@ function wrapWithModel(render: RenderFn, cfg: Config): RenderFn {
         if (!model && !spec.optional && spec instanceof UsesSpec) {
             console.error(`
                 Failed to find model with selector '${formatSelector(spec.selector)}' for
-                component '${
-                    cfg.displayName
-                }'.  Ensure the proper model is available via context, or
+                component '${cfg.displayName}'. Ensure the proper model is available via context, or
                 specify explicitly using the 'model' prop.
             `);
             return cmpErrDisplay({...getLayoutProps(props), item: 'No model found'});

package/core/exception/ExceptionHandler.ts

@@ -6,7 +6,7 @@
  */
 import {Exception} from './Exception';
 import {fragment, span} from '@xh/hoist/cmp/layout';
-import {stripTags} from '@xh/hoist/utils/js';
+import {logError, logWarn, stripTags} from '@xh/hoist/utils/js';
 import {Icon} from '@xh/hoist/icon';
 import {forOwn, has, isArray, isNil, isObject, omitBy, pick, set} from 'lodash';
 import {HoistException, PlainObject, XH} from '../';
@@ -189,7 +189,7 @@ export class ExceptionHandler {
                 username = XH.getUsername();
 
             if (!username) {
-                console.warn('Error report cannot be submitted to UI server - user unknown');
+                logWarn('Error report cannot be submitted to UI server - user unknown', this);
                 return false;
             }
 
@@ -206,7 +206,7 @@ export class ExceptionHandler {
             });
             return true;
         } catch (e) {
-            console.error('Exception while submitting error report to UI server', e);
+            logError(['Exception while submitting error report to UI server', e], this);
             return false;
         }
     }
@@ -261,7 +261,7 @@ export class ExceptionHandler {
             return stripTags(JSON.stringify(ret, null, 4));
         } catch (e) {
             const message = 'Failed to serialize error';
-            console.error(message, exception, e);
+            logError([message, exception, e], this);
             return JSON.stringify({message}, null, 4);
         }
     }

package/core/load/LoadSupport.ts

@@ -7,8 +7,8 @@
 import {HoistBase, managed, PlainObject, RefreshContextModel, TaskObserver} from '../';
 import {LoadSpec, Loadable} from './';
 import {makeObservable, observable, runInAction} from '@xh/hoist/mobx';
-import {throwIf} from '@xh/hoist/utils/js';
-import {isPlainObject} from 'lodash';
+import {logDebug, logError, throwIf} from '@xh/hoist/utils/js';
+import {isPlainObject, pull} from 'lodash';
 
 /**
  * Provides support for objects that participate in Hoist's loading/refresh lifecycle.
@@ -98,18 +98,17 @@ export class LoadSupport extends HoistBase implements Loadable {
                 if (target instanceof RefreshContextModel) return;
 
                 const elapsed = this.lastLoadCompleted.getTime() - this.lastLoadRequested.getTime(),
-                    msg = `[${target.constructor.name}] | ${loadSpec.typeDisplay} | ${
-                        exception ? 'failed | ' : ''
-                    }${elapsed}ms`;
+                    status = exception ? 'failed' : null,
+                    msg = pull([loadSpec.typeDisplay, status, `${elapsed}ms`, exception], null);
 
                 if (exception) {
                     if (exception.isRoutine) {
-                        console.debug(msg, exception);
+                        logDebug(msg, target);
                     } else {
-                        console.error(msg, exception);
+                        logError(msg, target);
                     }
                 } else {
-                    console.debug(msg);
+                    logDebug(msg, target);
                 }
             });
     }

package/data/cube/aggregate/UniqueAggregator.ts

@@ -4,20 +4,18 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-
 import {Aggregator} from './Aggregator';
-import {isEmpty} from 'lodash';
+import {isEmpty, isEqual} from 'lodash';
 
 export class UniqueAggregator extends Aggregator {
     override aggregate(rows, fieldName) {
         if (isEmpty(rows)) return null;
-
         const val = rows[0].data[fieldName];
-        return rows.every(it => it.data[fieldName] === val) ? val : null;
+        return rows.every(it => isEqual(it.data[fieldName], val)) ? val : null;
     }
 
     override replace(rows, currAgg, update, context) {
         const {newValue} = update;
-        return rows.length === 1 || newValue === currAgg ? newValue : null;
+        return rows.length === 1 || isEqual(newValue, currAgg) ? newValue : null;
     }
 }

package/desktop/cmp/button/ColChooserButton.ts

@@ -12,7 +12,7 @@ import {ColChooserModel} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColCho
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {popover, Position} from '@xh/hoist/kit/blueprint';
-import {stopPropagation, withDefault} from '@xh/hoist/utils/js';
+import {logError, stopPropagation, withDefault} from '@xh/hoist/utils/js';
 import {button, ButtonProps} from './Button';
 
 export interface ColChooserButtonProps extends ButtonProps {
@@ -40,15 +40,17 @@ export const [ColChooserButton, colChooserButton] = hoistCmp.withFactory<ColChoo
         const colChooserModel = gridModel?.colChooserModel as ColChooserModel;
 
         if (!gridModel) {
-            console.error(
-                "No GridModel available to ColChooserButton.  Provide via a 'gridModel' prop, or context."
+            logError(
+                "No GridModel available.  Provide via a 'gridModel' prop, or context.",
+                ColChooserButton
             );
             disabled = true;
         }
 
         if (!colChooserModel) {
-            console.error(
-                'No ColChooserModel available on bound GridModel - enable via GridModel.colChooserModel config.'
+            logError(
+                'No ColChooserModel available on bound GridModel - enable via GridModel.colChooserModel config.',
+                ColChooserButton
             );
             disabled = true;
         }

package/desktop/cmp/button/ZoneMapperButton.ts

@@ -12,7 +12,7 @@ import {ZoneMapperModel} from '@xh/hoist/cmp/zoneGrid/impl/ZoneMapperModel';
 import {zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapper';
 import {Icon} from '@xh/hoist/icon';
 import {popover, Position} from '@xh/hoist/kit/blueprint';
-import {stopPropagation, withDefault} from '@xh/hoist/utils/js';
+import {logError, stopPropagation, withDefault} from '@xh/hoist/utils/js';
 import {button, ButtonProps} from './Button';
 
 export interface ZoneMapperButtonProps extends ButtonProps {
@@ -37,15 +37,17 @@ export const [ZoneMapperButton, zoneMapperButton] = hoistCmp.withFactory<ZoneMap
         const mapperModel = zoneGridModel?.mapperModel as ZoneMapperModel;
 
         if (!zoneGridModel) {
-            console.error(
-                "No ZoneGridModel available to ZoneMapperButton. Provide via a 'zoneGridModel' prop, or context."
+            logError(
+                "No ZoneGridModel available. Provide via a 'zoneGridModel' prop, or context.",
+                ZoneMapperButton
             );
             disabled = true;
         }
 
         if (!mapperModel) {
-            console.error(
-                'No ZoneMapperModel available on bound ZoneGridModel - enable via ZoneGridModel.zoneMapperModel config.'
+            logError(
+                'No ZoneMapperModel available on bound ZoneGridModel - enable via ZoneGridModel.zoneMapperModel config.',
+                ZoneMapperButton
             );
             disabled = true;
         }

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -189,7 +189,7 @@ export class DashCanvasModel extends DashModel<
                 this.provider = PersistenceProvider.create({path: 'dashCanvas', ...persistWith});
                 persistState = this.provider.read();
             } catch (e) {
-                console.error(e);
+                this.logError(e);
                 XH.safeDestroy(this.provider);
                 this.provider = null;
             }
@@ -419,7 +419,7 @@ export class DashCanvasModel extends DashModel<
                 if (this.hasSpec(viewSpecId)) {
                     this.addViewInternal(viewSpecId, state);
                 } else {
-                    console.warn(`Unknown viewSpecId [${viewSpecId}] found in state - skipping.`);
+                    this.logWarn(`Unknown viewSpecId [${viewSpecId}] found in state - skipping.`);
                 }
             });
         } finally {

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

@@ -195,7 +195,7 @@ export class DashContainerModel extends DashModel<
                 this.provider = PersistenceProvider.create({path: 'dashContainer', ...persistWith});
                 persistState = this.provider.read();
             } catch (e) {
-                console.error(e);
+                this.logError(e);
                 XH.safeDestroy(this.provider);
                 this.provider = null;
             }
@@ -238,7 +238,7 @@ export class DashContainerModel extends DashModel<
     async loadStateAsync(state) {
         const containerEl = this.containerRef.current;
         if (!containerEl) {
-            console.warn(
+            this.logWarn(
                 'DashboardContainer not yet rendered - cannot update state - change will be discarded!'
             );
             return;

package/desktop/cmp/dock/DockViewModel.ts

@@ -33,12 +33,16 @@ export interface DockViewConfig {
     icon?: ReactElement;
     /** Content to be rendered by this DockView. */
     content: Content;
-    /** Width in pixels. If not set, width will be determined by the content. */
-    width?: number;
-    /** Height in pixels. If not set, height will be determined by the content. */
-    height?: number;
-    /** Width of collapsed header in pixels. If not set, width will be determined by the length of the title. */
-    collapsedWidth?: number;
+    /** Width: if not set, will be determined by content. */
+    width?: string | number;
+    /** Height: if not set, will be determined by content. */
+    height?: string | number;
+    /** Width of collapsed header. If not set, width will be determined by the length of the title. */
+    collapsedWidth?: string | number;
+    /** Width when displayed in a modal dialog.  If not set, will fall back on default `width`. */
+    dialogWidth?: string | number;
+    /** Height when displayed in a modal dialog.  If not set, will fall back on default `height`. */
+    dialogHeight?: string | number;
     /** Strategy for rendering this DockView. If null, will default to its container's mode. */
     renderMode?: RenderMode;
     /** Strategy for refreshing this DockView. If null, will default to its container's mode. */
@@ -72,9 +76,11 @@ export class DockViewModel extends HoistModel {
     @observable docked: boolean;
     @observable collapsed: boolean;
     content: Content;
-    width: number;
-    height: number;
-    collapsedWidth: number;
+    width: string | number;
+    height: string | number;
+    collapsedWidth: string | number;
+    dialogWidth: string | number;
+    dialogHeight: string | number;
     allowClose: boolean;
     allowDialog: boolean;
     onClose?: () => Awaitable<boolean | void>;
@@ -107,6 +113,8 @@ export class DockViewModel extends HoistModel {
         width,
         height,
         collapsedWidth,
+        dialogWidth,
+        dialogHeight,
         refreshMode,
         renderMode,
         docked = true,
@@ -127,6 +135,8 @@ export class DockViewModel extends HoistModel {
         this.width = width;
         this.height = height;
         this.collapsedWidth = collapsedWidth;
+        this.dialogWidth = dialogWidth ?? width;
+        this.dialogHeight = dialogHeight ?? height;
 
         this.docked = docked;
         this.collapsed = collapsed;
@@ -140,8 +150,8 @@ export class DockViewModel extends HoistModel {
         this.refreshContextModel = new ManagedRefreshContextModel(this);
 
         this.modalSupportModel = new ModalSupportModel({
-            width: width ?? null,
-            height: height ?? null,
+            width: dialogWidth ?? null,
+            height: dialogHeight ?? null,
             defaultModal: !docked,
             canOutsideClickClose: false
         });

package/desktop/cmp/dock/impl/DockView.ts

@@ -36,6 +36,8 @@ export const dockView = hoistCmp.factory<DockViewProps>({
                 width,
                 height,
                 collapsedWidth,
+                dialogWidth,
+                dialogHeight,
                 collapsed,
                 docked,
                 isActive,
@@ -67,8 +69,8 @@ export const dockView = hoistCmp.factory<DockViewProps>({
         return modalSupport({
             model: model.modalSupportModel,
             item: vbox({
-                width: collapsed ? collapsedWidth : width,
-                height: !collapsed ? height : undefined,
+                width: collapsed ? collapsedWidth : docked ? width : dialogWidth,
+                height: collapsed ? undefined : docked ? height : dialogHeight,
                 className: classNames(className, `xh-dock-view--${suffix}`),
                 items: [header, body]
             })

package/desktop/cmp/form/FormField.ts

@@ -15,7 +15,7 @@ import {fmtDate, fmtDateTime, fmtJson, fmtNumber} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {tooltip} from '@xh/hoist/kit/blueprint';
 import {isLocalDate} from '@xh/hoist/utils/datetime';
-import {errorIf, getTestId, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {errorIf, getTestId, logWarn, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps, getReactElementName, useOnMount, useOnUnmount} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isBoolean, isDate, isEmpty, isFinite, isNil, isUndefined, kebabCase} from 'lodash';
@@ -107,7 +107,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         model = model ?? (formModel && field ? formModel.fields[field] : null);
 
         if (!model) {
-            console.warn(`Unable to bind FormField to field "${field}" on backing FormModel`);
+            logWarn(`Unable to bind FormField to field "${field}" on backing FormModel`, FormField);
         }
 
         // Model related props

package/desktop/cmp/grid/editors/BooleanEditor.ts

@@ -12,6 +12,7 @@ import {useImperativeHandle} from 'react';
 import {EditorProps} from './EditorProps';
 import './Editors.scss';
 import {useInlineEditorModel} from './impl/InlineEditorModel';
+import {logWarn} from '@xh/hoist/utils/js';
 
 export interface BooleanEditorProps extends EditorProps<CheckboxProps> {
     /**
@@ -35,7 +36,10 @@ export const [BooleanEditor, booleanEditor] = hoistCmp.withFactory<BooleanEditor
         quickToggle = quickToggle ?? !fullRowEditing;
 
         if (quickToggle && fullRowEditing) {
-            console.warn("'quickToggle' prop ignored for GridModel with full row editing.");
+            logWarn(
+                "'quickToggle' prop ignored for GridModel with full row editing.",
+                BooleanEditor
+            );
             quickToggle = false;
         }
 

package/desktop/cmp/input/DateInput.ts

@@ -319,9 +319,7 @@ class DateInputModel extends HoistInputModel {
             if (date) {
                 date = this.applyPrecision(date);
             } else {
-                console.debug(
-                    'DateInput value exceeded max/minDate bounds on change - reset to null.'
-                );
+                this.logDebug('Value exceeded max/minDate bounds on change - reset to null.');
             }
         }
         this.noteValueChange(date);

package/desktop/cmp/panel/Panel.ts

@@ -23,6 +23,7 @@ import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import '@xh/hoist/desktop/register';
 import {HotkeyConfig} from '@xh/hoist/kit/blueprint';
+import {logWarn} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import {castArray, omitBy} from 'lodash';
 import {Children, isValidElement, ReactElement, ReactNode, useLayoutEffect, useRef} from 'react';
@@ -256,8 +257,9 @@ function parseLoadDecorator(prop: any, name: string, contextModel: HoistModel) {
     if (prop === 'onLoad') {
         const loadModel = contextModel?.loadModel;
         if (!loadModel) {
-            console.warn(
-                `Cannot use 'onLoad' for '${name}' - the linked context model must enable LoadSupport to support this feature.`
+            logWarn(
+                `Cannot use 'onLoad' for '${name}' - the linked context model must enable LoadSupport to support this feature.`,
+                Panel
             );
             return null;
         }

package/desktop/cmp/panel/PanelModel.ts

@@ -213,7 +213,7 @@ export class PanelModel extends HoistModel {
                 : defaultSize;
 
         if ((collapsible || resizable) && (isNil(defaultSize) || isNil(side))) {
-            console.error(
+            this.logError(
                 "Must specify 'defaultSize' and 'side' for a collapsible or resizable PanelModel. Panel sizing disabled."
             );
             collapsible = false;
@@ -221,12 +221,12 @@ export class PanelModel extends HoistModel {
         }
 
         if (!isNil(maxSize) && maxSize < minSize) {
-            console.error("'maxSize' must be greater than 'minSize'. No 'maxSize' will be set.");
+            this.logError("'maxSize' must be greater than 'minSize'. No 'maxSize' will be set.");
             maxSize = null;
         }
 
         if (resizable && !resizeWhileDragging && !showSplitter) {
-            console.error(
+            this.logError(
                 "Must not set 'showSplitter = false' for a resizable PanelModel unless 'resizeWhileDragging` is enabled. Panel sizing disabled."
             );
             resizable = false;
@@ -277,7 +277,7 @@ export class PanelModel extends HoistModel {
                 this.provider = PersistenceProvider.create({path: 'panel', ...persistWith});
                 state = this.provider.read() ?? this.legacyState();
             } catch (e) {
-                console.error(e);
+                this.logError(e);
                 XH.safeDestroy(this.provider);
                 this.provider = null;
             }
@@ -408,7 +408,7 @@ export class PanelModel extends HoistModel {
                     return data;
                 }
             } catch (e) {
-                console.error('Failed reading legacy state');
+                this.logError('Failed reading legacy state', e);
             }
         }
         return null;

package/desktop/cmp/treemap/TreeMap.ts

@@ -22,7 +22,7 @@ import {mask} from '@xh/hoist/desktop/cmp/mask';
 import '@xh/hoist/desktop/register';
 import {Highcharts} from '@xh/hoist/kit/highcharts';
 import {wait} from '@xh/hoist/promise';
-import {logWithDebug} from '@xh/hoist/utils/js';
+import {logError, logWithDebug} from '@xh/hoist/utils/js';
 import {
     createObservableRef,
     getLayoutProps,
@@ -53,9 +53,10 @@ export const [TreeMap, treeMap] = hoistCmp.withFactory<TreeMapProps>({
 
     render({model, className, testId, ...props}, ref) {
         if (!Highcharts) {
-            console.error(
+            logError(
                 'Highcharts has not been imported in to this application. Please import and ' +
-                    'register in Bootstrap.js.  See Toolbox for an example.'
+                    'register in Bootstrap.js.  See Toolbox for an example.',
+                TreeMap
             );
             return 'Highcharts not available';
         }

package/inspector/instances/InstancesModel.ts

@@ -369,8 +369,8 @@ export class InstancesModel extends HoistModel {
                     const displayGroup = inst.isHoistService
                         ? 'Services'
                         : inst.isStore
-                        ? 'Stores'
-                        : 'Models';
+                          ? 'Stores'
+                          : 'Models';
                     data.push({...inst, displayGroup});
                 });
 
@@ -464,8 +464,8 @@ export class InstancesModel extends HoistModel {
             isGetter && !isLoadedGetter
                 ? 'get(?)'
                 : isProxy
-                ? 'Proxy'
-                : v?.constructor?.name ?? typeof v;
+                  ? 'Proxy'
+                  : v?.constructor?.name ?? typeof v;
 
         return {
             id: `${xhId}-${property}${fromWatchlistItem ? '-wl' : ''}`,
@@ -479,8 +479,8 @@ export class InstancesModel extends HoistModel {
                 isHoistModel || isHoistService || isStore
                     ? v.xhId
                     : isProxy
-                    ? '[cannot render]'
-                    : v,
+                      ? '[cannot render]'
+                      : v,
             valueType,
             isOwnProperty,
             isObservable,

package/mobile/cmp/button/ColAutosizeButton.ts

@@ -10,7 +10,7 @@ import {hoistCmp, useContextModel} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
-import {withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 
 export interface ColAutosizeButtonProps extends ButtonProps {
     /** GridModel of the grid for which this button should autosize columns. */
@@ -31,8 +31,9 @@ export const [ColAutosizeButton, colAutosizeButton] = hoistCmp.withFactory<ColAu
         gridModel = withDefault(gridModel, useContextModel(GridModel));
 
         if (!gridModel?.autosizeEnabled) {
-            console.error(
-                "No GridModel available with autosize enabled. Provide via a 'gridModel' prop, or context."
+            logError(
+                "No GridModel available with autosize enabled. Provide via a 'gridModel' prop, or context.",
+                ColAutosizeButton
             );
             return button({icon, disabled: true, ...props});
         }

package/mobile/cmp/button/ColChooserButton.ts

@@ -9,7 +9,7 @@ import {hoistCmp, useContextModel} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
-import {withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 
 export interface ColChooserButtonProps extends ButtonProps {
     /** GridModel of the grid for which this button should show a chooser. */
@@ -30,8 +30,9 @@ export const [ColChooserButton, colChooserButton] = hoistCmp.withFactory<ColChoo
         gridModel = withDefault(gridModel, useContextModel(GridModel));
 
         if (!gridModel) {
-            console.error(
-                "No GridModel available to ColChooserButton. Provide via a 'gridModel' prop, or context."
+            logError(
+                "No GridModel available. Provide via a 'gridModel' prop, or context.",
+                ColChooserButton
             );
             return button({icon, disabled: true, ...props});
         }

package/mobile/cmp/button/ExpandCollapseButton.ts

@@ -9,7 +9,7 @@ import {hoistCmp, useContextModel} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
-import {withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
 
 export interface ExpandCollapseButtonProps extends ButtonProps {
@@ -28,8 +28,9 @@ export const [ExpandCollapseButton, expandCollapseButton] =
             gridModel = withDefault(gridModel, useContextModel(GridModel));
 
             if (!gridModel) {
-                console.error(
-                    "No GridModel available. Provide via a 'gridModel' prop, or context."
+                logError(
+                    "No GridModel available. Provide via a 'gridModel' prop, or context.",
+                    ExpandCollapseButton
                 );
                 return button({icon: Icon.expand(), disabled: true, ...props});
             }

package/mobile/cmp/button/ZoneMapperButton.ts

@@ -8,7 +8,7 @@ import {hoistCmp, useContextModel} from '@xh/hoist/core';
 import {ZoneGridModel} from '../../../cmp/zoneGrid';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import {Icon} from '@xh/hoist/icon';
-import {withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 import '@xh/hoist/mobile/register';
 
 export interface ZoneMapperButtonProps extends ButtonProps {
@@ -28,8 +28,9 @@ export const [ZoneMapperButton, zoneMapperButton] = hoistCmp.withFactory<ZoneMap
         zoneGridModel = withDefault(zoneGridModel, useContextModel(ZoneGridModel));
 
         if (!zoneGridModel) {
-            console.error(
-                "No ZoneGridModel available to ZoneMapperButton. Provide via a 'zoneGridModel' prop, or context."
+            logError(
+                "No ZoneGridModel available. Provide via a 'zoneGridModel' prop, or context.",
+                ZoneMapperButton
             );
             return button({icon, disabled: true, ...props});
         }

package/mobile/cmp/input/DateInput.ts

@@ -161,7 +161,7 @@ class DateInputModel extends HoistInputModel {
         if (date && this.isOutsideRange(date)) {
             // Dates outside of min/max constraints are reset to null.
             date = null;
-            console.debug('DateInput value exceeded max/minDate bounds on change - reset to null.');
+            this.logDebug('Value exceeded max/minDate bounds on change - reset to null.');
         }
         this.noteValueChange(date ? date.toDate() : null);
     };

package/mobile/cmp/input/Select.ts

@@ -272,8 +272,8 @@ class SelectInputModel extends HoistInputModel {
                 ? reactAsyncCreatableSelect
                 : reactAsyncSelect
             : creatableMode
-            ? reactCreatableSelect
-            : reactSelect;
+              ? reactCreatableSelect
+              : reactSelect;
     }
 
     @action
@@ -468,7 +468,7 @@ class SelectInputModel extends HoistInputModel {
                 return matchOpts;
             })
             .catch(e => {
-                console.error(e);
+                this.logError(e);
                 throw e;
             });
     };

package/mobile/cmp/panel/Panel.ts

@@ -24,6 +24,7 @@ import {omitBy} from 'lodash';
 import {isValidElement, ReactNode, ReactElement} from 'react';
 import {panelHeader} from './impl/PanelHeader';
 import './Panel.scss';
+import {logWarn} from '@xh/hoist/utils/js';
 
 export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     /** A toolbar to be docked at the bottom of the panel. */
@@ -141,8 +142,9 @@ function parseLoadDecorator(prop, name, contextModel) {
     if (prop === 'onLoad') {
         const loadModel = contextModel?.loadModel;
         if (!loadModel) {
-            console.warn(
-                `Cannot use 'onLoad' for '${name}'.  Context model does not implement loading.`
+            logWarn(
+                `Cannot use 'onLoad' for '${name}'.  Context model does not implement loading.`,
+                Panel
             );
             return null;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "59.4.0",
+  "version": "59.5.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -65,7 +65,7 @@
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "1.4.3",
     "react-markdown": "^8.0.7",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",

package/svc/AutoRefreshService.ts

@@ -69,7 +69,7 @@ export class AutoRefreshService extends HoistService {
             pendingLoad = lastRequested && lastRequested > lastCompleted;
 
         if (!pendingLoad && olderThan(last, this.interval * SECONDS)) {
-            this.logDebug('Triggering application auto-refresh.');
+            this.logDebug('Triggering application auto-refresh');
             await ctx.autoRefreshAsync();
         }
     }

package/svc/ChangelogService.ts

@@ -96,12 +96,12 @@ export class ChangelogService extends HoistService {
         const {latestAvailableVersion, LAST_READ_PREF_KEY} = this;
 
         if (includes(latestAvailableVersion, 'SNAPSHOT')) {
-            console.warn('Unable to mark changelog as read when latest version is SNAPSHOT.');
+            this.logWarn('Unable to mark changelog as read when latest version is SNAPSHOT.');
             return;
         }
 
         if (!latestAvailableVersion || !XH.prefService.hasKey(LAST_READ_PREF_KEY)) {
-            console.warn(
+            this.logWarn(
                 'Unable to mark changelog as read - latest version or required pref not found.'
             );
             return;
@@ -147,7 +147,7 @@ export class ChangelogService extends HoistService {
 
             return versions;
         } catch (e) {
-            console.error(
+            this.logError(
                 'Error parsing changelog JSON into versions - changelog will not be available',
                 e
             );

package/svc/EnvironmentService.ts

@@ -136,7 +136,7 @@ export class EnvironmentService extends HoistService {
         // prompted to refresh.
         const clientVersion = this.get('clientVersion');
         if (appVersion !== clientVersion) {
-            console.warn(
+            this.logWarn(
                 `Version mismatch detected between client and server - ${clientVersion} vs ${appVersion}`
             );
         }

package/svc/GridExportService.ts

@@ -327,13 +327,8 @@ export class GridExportService extends HoistService {
                 : it.exportName;
 
             if (!isString(ret)) {
-                console.warn(
-                    'Tried to export column ' +
-                        it.colId +
-                        ' with an invalid "exportName", ' +
-                        'probably caused by setting "headerName" to a React element. Please specify an ' +
-                        'appropriate "exportName". Defaulting to ' +
-                        it.colId
+                this.logWarn(
+                    `Tried to export column '${it.colId}' with an invalid "exportName", probably caused by setting "headerName" to a React element. Please specify an appropriate "exportName". Defaulting to '${it.colId}'`
                 );
                 ret = it.colId;
             }
@@ -345,7 +340,7 @@ export class GridExportService extends HoistService {
         const headerCounts = countBy(headers.map(it => it.toLowerCase())),
             dupeHeaders = keys(pickBy(headerCounts, it => it > 1));
         if (type === 'excelTable' && !isEmpty(dupeHeaders)) {
-            console.warn(
+            this.logWarn(
                 'Excel tables require unique headers on each column. Consider using the "exportName" property to ensure unique headers. Duplicate headers: ',
                 dupeHeaders
             );

package/svc/IdentityService.ts

@@ -62,7 +62,7 @@ export class IdentityService extends HoistService {
         try {
             await XH.appModel?.logoutAsync();
         } catch (e) {
-            console.error('Error calling XH.appModel.logoutAsync()', e);
+            this.logError('Error calling XH.appModel.logoutAsync()', e);
         }
         return XH.fetchJson({url: 'xh/logout'})
             .then(() => XH.reloadApp())

package/svc/TrackService.ts

@@ -45,19 +45,13 @@ export class TrackService extends HoistService {
 
         // Short-circuit if disabled...
         if (!this.enabled) {
-            console.debug(
-                '[TrackService] | Activity tracking disabled - activity will not be tracked.',
-                options
-            );
+            this.logDebug('Activity tracking disabled - activity will not be tracked.', options);
             return;
         }
 
         // ...or invalid request (with warning for developer)...
         if (!options.message) {
-            console.warn(
-                '[TrackService] | Required message not provided - activity will not be tracked.',
-                options
-            );
+            this.logWarn('Required message not provided - activity will not be tracked.', options);
             return;
         }
 
@@ -113,7 +107,7 @@ export class TrackService extends HoistService {
 
             await XH.fetchJson({url: 'xh/track', params});
         } catch (e) {
-            console.error(`[TrackService] | Failed to persist track log`, options, e);
+            this.logError('Failed to persist track log', options, e);
         }
     }
 }

package/utils/async/Timer.ts

@@ -7,7 +7,7 @@
 import {XH} from '@xh/hoist/core';
 import {wait} from '@xh/hoist/promise';
 import {MILLISECONDS, MINUTES, olderThan} from '@xh/hoist/utils/datetime';
-import {logWarn, throwIf} from '@xh/hoist/utils/js';
+import {logError, logWarn, throwIf} from '@xh/hoist/utils/js';
 import {isBoolean, isFinite, isFunction, isNil, isString, pull} from 'lodash';
 
 /**
@@ -122,7 +122,7 @@ export class Timer {
         try {
             await (this.internalRunFn() as any).timeout(this.timeoutMs);
         } catch (e) {
-            console.error('Error executing timer:', e);
+            logError(['Error executing timer', e], this);
         }
         this.isRunning = false;
         this.lastRun = new Date();

package/utils/datetime/LocalDate.ts

@@ -5,8 +5,8 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {XH} from '@xh/hoist/core';
-import {throwIf, computeOnce} from '@xh/hoist/utils/js';
-import {isString, isNil} from 'lodash';
+import {computeOnce, throwIf} from '@xh/hoist/utils/js';
+import {isNil, isString} from 'lodash';
 import moment, {Moment, MomentInput} from 'moment';
 
 /**
@@ -25,9 +25,9 @@ export class LocalDate {
     private static _instances = new Map();
     static VALID_UNITS = ['year', 'quarter', 'month', 'week', 'day', 'date'];
 
-    private _isoString;
-    private _moment;
-    private _date;
+    private _isoString: string;
+    private _moment: Moment;
+    private _date: Date;
 
     //------------------------
     // Factories
@@ -99,8 +99,8 @@ export class LocalDate {
     }
 
     /** Is the input value a local Date? */
-    static isLocalDate(v: any): boolean {
-        return v?.isLocalDate;
+    static isLocalDate(val: any): boolean {
+        return !!val?.isLocalDate;
     }
 
     //--------------------
@@ -168,15 +168,15 @@ export class LocalDate {
     //----------------
     // Core overrides.
     //----------------
-    toString() {
+    toString(): string {
         return this._isoString;
     }
 
-    toJSON() {
+    toJSON(): string {
         return this._isoString;
     }
 
-    valueOf() {
+    valueOf(): string {
         return this._isoString;
     }
 
@@ -281,7 +281,7 @@ export class LocalDate {
         return this.isWeekday ? this : this.previousWeekday();
     }
 
-    diff(other, unit = 'days'): number {
+    diff(other: LocalDate, unit: moment.unitOfTime.Diff = 'days'): number {
         this.ensureUnitValid(unit);
         return this._moment.diff(other._moment, unit);
     }
@@ -290,7 +290,7 @@ export class LocalDate {
     // Implementation
     //-------------------
     /** @internal - use one of the static factory methods instead. */
-    private constructor(s) {
+    private constructor(s: string) {
         const m = moment(s, 'YYYY-MM-DD', true);
         throwIf(
             !m.isValid(),
@@ -315,6 +315,6 @@ export class LocalDate {
  * Is the input value a local Date?
  * Convenience alias for LocalDate.isLocalDate()
  */
-export function isLocalDate(val): val is LocalDate {
+export function isLocalDate(val: any): val is LocalDate {
     return !!val?.isLocalDate;
 }

package/utils/js/Decorators.ts

@@ -6,8 +6,8 @@
  */
 import {XH} from '@xh/hoist/core';
 import {debounce, isFunction} from 'lodash';
-import {throwIf, getOrCreate, warnIf} from './LangUtils';
-import {withDebug} from './LogUtils';
+import {getOrCreate, throwIf, warnIf} from './LangUtils';
+import {withDebug, withInfo} from './LogUtils';
 
 /**
  * Decorates a class method so that it is debounced by the specified duration.
@@ -53,7 +53,22 @@ export function computeOnce(target, key, descriptor) {
 }
 
 /**
- * Modify a method so that its execution is tracked and timed with a debug message.
+ * Modify a method so that its execution is tracked and timed with a log message on the console.
+ * @see withInfo
+ */
+export function logWithInfo(target, key, descriptor) {
+    const {value} = descriptor;
+    throwIf(!isFunction(value), '@logWithInfo must be applied to a class method.');
+    return {
+        ...descriptor,
+        value: function (...args) {
+            return withInfo(key, () => value.apply(this, args), this);
+        }
+    };
+}
+
+/**
+ * Modify a method so that its execution is tracked and timed with a debug message on the console.
  * @see withDebug
  */
 export function logWithDebug(target, key, descriptor) {