@xh/hoist 74.0.0-SNAPSHOT.1748629362620 → 74.0.0-SNAPSHOT.1749036244810

package/CHANGELOG.md

@@ -9,10 +9,13 @@
 ### 🎁 New Features
 * Added `ViewManagerModel.preserveUnsavedChanges` flag to opt-out of that behaviour.
 * Added `PersistOptions.settleTime` to configure time to wait for state to settle before persisting.
+* Support for gridcolumn level `onCellClicked` events.
 
 ### 🐞 Bug Fixes
 * Improved `ViewManagerModel.settleTime` by delegating to individual `PersistenceProviders`.
 * Fixed bug where grid column state could become unintentionally dirty when columns were hidden.
+* Improved `WebsocketService` heartbeat detection to auto-reconnect when the socket reports as open
+  and heartbeats can be sent, but no heartbeat acknowledgements are being received from the server.
 
 ## v73.0.1 - 2025-05-19
 

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

@@ -120,7 +120,9 @@ export interface GridConfig {
      */
     onRowDoubleClicked?: (e: RowDoubleClickedEvent) => void;
     /**
-     * Callback when a cell is clicked.
+     * Callback when any cell on the grid is clicked - inspect the event to determine the column.
+     * Note that {@link ColumnSpec.onCellClicked} is a more targeted handler scoped to a single
+     * column, which might be more convenient when clicks on only one column are of interest.
      */
     onCellClicked?: (e: CellClickedEvent) => void;
     /**

package/build/types/cmp/grid/columns/Column.d.ts

@@ -4,6 +4,7 @@ import { FunctionComponent, ReactNode } from 'react';
 import { GridModel } from '../GridModel';
 import { ColumnCellClassFn, ColumnCellClassRuleFn, ColumnComparator, ColumnEditableFn, ColumnEditorFn, ColumnEditorProps, ColumnExcelFormatFn, ColumnExportValueFn, ColumnGetValueFn, ColumnHeaderClassFn, ColumnHeaderNameFn, ColumnRenderer, ColumnSetValueFn, ColumnSortSpec, ColumnSortValueFn, ColumnTooltipFn } from '../Types';
 import type { ColDef } from '@xh/hoist/kit/ag-grid';
+import { CellClickedEvent } from '@ag-grid-community/core';
 export interface ColumnSpec {
     /**
      * Name of data store field to display within the column, or object containing properties
@@ -248,6 +249,11 @@ export interface ColumnSpec {
      * many rows + multiple actions per row. Defaults to false;
      */
     actionsShowOnHoverOnly?: boolean;
+    /**
+     * Callback when a cell within this column clicked.
+     * See also {@link GridConfig.onCellClicked}, called when any cell within the grid is clicked.
+     */
+    onCellClicked?: (e: CellClickedEvent) => void;
     /**
      * "escape hatch" object to pass directly to Ag-Grid for desktop implementations. Note these
      * options may be used / overwritten by the framework itself, and are not all guaranteed to be
@@ -337,6 +343,7 @@ export declare class Column {
     actionsShowOnHoverOnly?: boolean;
     fieldSpec: FieldSpec;
     omit: Thunkable<boolean>;
+    onCellClicked?: (e: CellClickedEvent) => void;
     gridModel: GridModel;
     agOptions: ColDef;
     appData: PlainObject;

package/build/types/svc/WebSocketService.d.ts

@@ -45,6 +45,8 @@ export declare class WebSocketService extends HoistService {
     private _timer;
     private _socket;
     private _subsByTopic;
+    private _lastHeartbeatSent;
+    private _lastHeartbeatReceived;
     constructor();
     initAsync(): Promise<void>;
     /**
@@ -70,7 +72,9 @@ export declare class WebSocketService extends HoistService {
     getFormattedTelemetry(): PlainObject;
     private connect;
     private disconnect;
+    private reconnect;
     private heartbeatOrReconnect;
+    private get heartbeatWasUnacknowledged();
     private onServerInstanceChange;
     onOpen(ev: any): void;
     onClose(ev: any): void;

package/cmp/grid/GridModel.ts

@@ -255,7 +255,9 @@ export interface GridConfig {
     onRowDoubleClicked?: (e: RowDoubleClickedEvent) => void;
 
     /**
-     * Callback when a cell is clicked.
+     * Callback when any cell on the grid is clicked - inspect the event to determine the column.
+     * Note that {@link ColumnSpec.onCellClicked} is a more targeted handler scoped to a single
+     * column, which might be more convenient when clicks on only one column are of interest.
      */
     onCellClicked?: (e: CellClickedEvent) => void;
 

package/cmp/grid/columns/Column.ts

@@ -71,6 +71,7 @@ import type {
     ValueGetterParams,
     ValueSetterParams
 } from '@xh/hoist/kit/ag-grid';
+import {CellClickedEvent} from '@ag-grid-community/core';
 
 export interface ColumnSpec {
     /**
@@ -374,6 +375,12 @@ export interface ColumnSpec {
      */
     actionsShowOnHoverOnly?: boolean;
 
+    /**
+     * Callback when a cell within this column clicked.
+     * See also {@link GridConfig.onCellClicked}, called when any cell within the grid is clicked.
+     */
+    onCellClicked?: (e: CellClickedEvent) => void;
+
     /**
      * "escape hatch" object to pass directly to Ag-Grid for desktop implementations. Note these
      * options may be used / overwritten by the framework itself, and are not all guaranteed to be
@@ -479,6 +486,7 @@ export class Column {
     actionsShowOnHoverOnly?: boolean;
     fieldSpec: FieldSpec;
     omit: Thunkable<boolean>;
+    onCellClicked?: (e: CellClickedEvent) => void;
 
     gridModel: GridModel;
     agOptions: ColDef;
@@ -551,6 +559,7 @@ export class Column {
             actionsShowOnHoverOnly,
             actions,
             omit,
+            onCellClicked,
             agOptions,
             appData,
             ...rest
@@ -657,6 +666,7 @@ export class Column {
 
         this.actions = actions;
         this.actionsShowOnHoverOnly = actionsShowOnHoverOnly ?? false;
+        this.onCellClicked = onCellClicked;
 
         this.gridModel = gridModel;
         this.agOptions = agOptions ? clone(agOptions) : {};
@@ -758,7 +768,8 @@ export class Column {
                     if (event.shiftKey && event.key === 'Enter') return true;
 
                     return false;
-                }
+                },
+                onCellClicked: this.onCellClicked
             };
 
         // We will change this setter as needed to install the renderer in the proper location

package/package.json

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

package/svc/WebSocketService.ts

@@ -70,6 +70,9 @@ export class WebSocketService extends HoistService {
     private _socket: WebSocket;
     private _subsByTopic: Record<string, WebSocketSubscription[]> = {};
 
+    private _lastHeartbeatSent: number = null;
+    private _lastHeartbeatReceived: number = null;
+
     constructor() {
         super();
         makeObservable(this);
@@ -177,6 +180,10 @@ export class WebSocketService extends HoistService {
                 if (s === this._socket) this.onMessage(data);
             };
             this._socket = s;
+
+            // Reset heartbeat tracking - any prior values no longer relevant.
+            this._lastHeartbeatReceived = null;
+            this._lastHeartbeatSent = null;
         } catch (e) {
             this.logError('Failure creating WebSocket', e);
         }
@@ -192,24 +199,41 @@ export class WebSocketService extends HoistService {
         this.updateConnectedStatus();
     }
 
+    private reconnect() {
+        this.disconnect();
+        this.connect();
+    }
+
     private heartbeatOrReconnect() {
         this.updateConnectedStatus();
-        if (this.connected) {
-            this.sendMessage({topic: this.HEARTBEAT_TOPIC, data: 'ping'});
-            this.noteTelemetryEvent('heartbeatSent');
-        } else {
-            this.logWarn('Heartbeat found websocket not connected - attempting to reconnect...');
+
+        // If there is a problem, attempt to reconnect and come back on the next cycle.
+        const {connected, heartbeatWasUnacknowledged} = this;
+        if (!connected || heartbeatWasUnacknowledged) {
+            this.logWarn(
+                `Heartbeat found ${!connected ? 'websocket not connected' : 'last heartbeat not acknowledged'} - attempting to reconnect...`
+            );
             this.noteTelemetryEvent('heartbeatReconnectAttempt');
-            this.disconnect();
-            this.connect();
+            this.reconnect();
+            return;
         }
+
+        // If all looks OK, send a heartbeat message.
+        this.sendMessage({topic: this.HEARTBEAT_TOPIC, data: 'ping'});
+        this.noteTelemetryEvent('heartbeatSent');
+        this._lastHeartbeatSent = Date.now();
+    }
+
+    // We expect the server to respond immediately to every heartbeat. There will be a tiny window
+    // while the message is round-tripping, but that's not material to our check on HEARTBEAT_INTERVAL.
+    private get heartbeatWasUnacknowledged() {
+        return this._lastHeartbeatSent > this._lastHeartbeatReceived;
     }
 
     private onServerInstanceChange() {
         this.logWarn('Server instance changed - attempting to connect to new instance.');
         this.noteTelemetryEvent('instanceChangeReconnectAttempt');
-        this.disconnect();
-        this.connect();
+        this.reconnect();
     }
 
     //------------------------
@@ -256,6 +280,7 @@ export class WebSocketService extends HoistService {
                     XH.clientHealthService.sendReportAsync();
                     break;
                 case this.HEARTBEAT_TOPIC:
+                    this._lastHeartbeatReceived = Date.now();
                     this.noteTelemetryEvent('heartbeatReceived');
                     break;
             }