@xh/hoist 73.0.0-SNAPSHOT.1746554302414 → 73.0.0-SNAPSHOT.1746560538636

package/admin/columns/Clients.ts

@@ -14,11 +14,13 @@ export const createdTime: ColumnSpec = {
         type: 'date',
         displayName: 'Created'
     },
+    chooserGroup: 'Connection',
     ...Col.compactDate
 };
 
 export const isOpen: ColumnSpec = {
     field: {name: 'isOpen', type: 'bool'},
+    chooserGroup: 'Connection',
     headerName: '',
     align: 'center',
     width: 40,
@@ -34,6 +36,7 @@ export const key: ColumnSpec = {
         type: 'string',
         displayName: 'Channel Key'
     },
+    chooserGroup: 'Connection',
     width: 160
 };
 
@@ -43,6 +46,7 @@ export const lastReceivedTime: ColumnSpec = {
         type: 'date',
         displayName: 'Last Received'
     },
+    chooserGroup: 'Send/Receive',
     ...Col.compactDate,
     width: 140
 };
@@ -53,6 +57,7 @@ export const lastSentTime: ColumnSpec = {
         type: 'date',
         displayName: 'Last Sent'
     },
+    chooserGroup: 'Send/Receive',
     ...Col.compactDate,
     width: 140
 };
@@ -63,6 +68,7 @@ export const receivedMessageCount: ColumnSpec = {
         type: 'int',
         displayName: 'Received'
     },
+    chooserGroup: 'Send/Receive',
     ...Col.number,
     width: 90
 };
@@ -73,6 +79,7 @@ export const sentMessageCount: ColumnSpec = {
         type: 'int',
         displayName: 'Sent'
     },
+    chooserGroup: 'Send/Receive',
     ...Col.number,
     width: 90
 };

package/admin/columns/Tracking.ts

@@ -18,9 +18,11 @@ const autosizeMaxWidth = 400;
 export const appBuild: ColumnSpec = {
     field: {
         name: 'appBuild',
-        displayName: 'Build',
+        displayName: 'App Build',
         type: 'string'
     },
+    headerName: 'Build',
+    chooserGroup: 'Client App / Browser',
     width: 120
 };
 
@@ -30,15 +32,18 @@ export const appEnvironment: ColumnSpec = {
         type: 'string',
         displayName: 'Environment'
     },
+    chooserGroup: 'Core Data',
     width: 130
 };
 
 export const appVersion: ColumnSpec = {
     field: {
         name: 'appVersion',
-        displayName: 'Version',
+        displayName: 'App Version',
         type: 'string'
     },
+    headerName: 'Version',
+    chooserGroup: 'Client App / Browser',
     width: 120
 };
 
@@ -49,6 +54,7 @@ export const browser: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Client App / Browser',
     width: 100
 };
 
@@ -59,6 +65,7 @@ export const category: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Core Data',
     width: 100
 };
 
@@ -68,6 +75,7 @@ export const correlationId: ColumnSpec = {
         type: 'string',
         displayName: 'Correlation ID'
     },
+    chooserGroup: 'Core Data',
     renderer: badgeRenderer,
     width: 180,
     autosizeBufferPx: 20
@@ -75,6 +83,7 @@ export const correlationId: ColumnSpec = {
 
 export const data: ColumnSpec = {
     field: {name: 'data', type: 'json'},
+    chooserGroup: 'Core Data',
     width: 250,
     autosizeMaxWidth
 };
@@ -86,6 +95,7 @@ export const day: ColumnSpec = {
         isDimension: true
     },
     ...Col.localDate,
+    chooserGroup: 'Core Data',
     displayName: 'App Day'
 };
 
@@ -96,6 +106,7 @@ export const dayRange: ColumnSpec = {
         aggregator: new RangeAggregator(),
         displayName: 'App Day Range'
     },
+    chooserGroup: 'Core Data',
     align: 'right',
     width: 200,
     renderer: dayRangeRenderer,
@@ -110,11 +121,13 @@ export const device: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Client App / Browser',
     width: 100
 };
 
 export const deviceIcon: ColumnSpec = {
     field: device.field,
+    chooserGroup: 'Client App / Browser',
     headerName: Icon.desktop(),
     headerTooltip: 'Device',
     tooltip: true,
@@ -139,19 +152,32 @@ export const deviceIcon: ColumnSpec = {
     }
 };
 
+export const elapsedRenderer = numberRenderer({
+    label: 'ms',
+    nullDisplay: '-',
+    formatConfig: {thousandSeparated: false, mantissa: 0}
+});
+
 export const elapsed: ColumnSpec = {
     field: {
         name: 'elapsed',
         type: 'int',
         aggregator: 'AVG'
     },
+    chooserGroup: 'Core Data',
     width: 130,
-    align: 'right',
-    renderer: numberRenderer({
-        label: 'ms',
-        nullDisplay: '-',
-        formatConfig: {thousandSeparated: false, mantissa: 0}
-    })
+    renderer: elapsedRenderer
+};
+
+export const elapsedMax: ColumnSpec = {
+    field: {
+        name: 'elapsedMax',
+        type: 'int',
+        aggregator: 'MAX'
+    },
+    chooserGroup: 'Core Data',
+    width: 130,
+    renderer: elapsedRenderer
 };
 
 export const entryCount: ColumnSpec = {
@@ -161,6 +187,7 @@ export const entryCount: ColumnSpec = {
         displayName: 'Entries',
         aggregator: 'LEAF_COUNT'
     },
+    chooserGroup: 'Core Data',
     width: 80,
     align: 'right'
 };
@@ -171,6 +198,7 @@ export const entryId: ColumnSpec = {
         type: 'int',
         displayName: 'Entry ID'
     },
+    chooserGroup: 'Core Data',
     width: 100,
     align: 'right'
 };
@@ -180,11 +208,32 @@ export const error: ColumnSpec = {
         name: 'error',
         type: 'string'
     },
+    chooserGroup: 'Errors',
     width: 250,
     autosizeMaxWidth,
     renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
 };
 
+export const errorMessage: ColumnSpec = {
+    field: {
+        name: 'errorMessage',
+        type: 'string'
+    },
+    chooserGroup: 'Errors',
+    width: 250,
+    autosizeMaxWidth
+};
+
+export const errorName: ColumnSpec = {
+    field: {
+        name: 'errorName',
+        type: 'string'
+    },
+    chooserGroup: 'Errors',
+    width: 150,
+    autosizeMaxWidth
+};
+
 export const instance: ColumnSpec = {
     field: {
         name: 'instance',
@@ -192,6 +241,7 @@ export const instance: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Session IDs',
     renderer: badgeRenderer,
     width: 100
 };
@@ -201,6 +251,7 @@ export const loadId: ColumnSpec = {
         name: 'loadId',
         type: 'string'
     },
+    chooserGroup: 'Session IDs',
     ...badgeCol
 };
 
@@ -212,6 +263,7 @@ export const msg: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Core Data',
     width: 250,
     autosizeMaxWidth
 };
@@ -223,6 +275,7 @@ export const severity: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Core Data',
     width: 80
 };
 
@@ -259,6 +312,7 @@ export const tabId: ColumnSpec = {
         name: 'tabId',
         type: 'string'
     },
+    chooserGroup: 'Session IDs',
     ...badgeCol
 };
 
@@ -268,12 +322,14 @@ export const url: ColumnSpec = {
         type: 'string',
         displayName: 'URL'
     },
+    chooserGroup: 'Client App / Browser',
     width: 250,
     autosizeMaxWidth
 };
 
 export const urlPathOnly: ColumnSpec = {
     field: url.field,
+    chooserGroup: 'Client App / Browser',
     width: 250,
     autosizeMaxWidth,
     tooltip: true,
@@ -295,6 +351,7 @@ export const userAgent: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'Client App / Browser',
     width: 130,
     autosizeMaxWidth
 };
@@ -304,6 +361,7 @@ export const userAlertedFlag: ColumnSpec = {
     headerName: Icon.window(),
     headerTooltip:
         'Indicates if the user was shown an interactive alert when this error was triggered.',
+    chooserGroup: 'Errors',
     resizable: false,
     align: 'center',
     width: 50,
@@ -316,6 +374,7 @@ export const userMessageFlag: ColumnSpec = {
     headerName: Icon.comment(),
     headerTooltip:
         'Indicates if the user provided a message along with the automated error report.',
+    chooserGroup: 'Errors',
     excludeFromExport: true,
     resizable: false,
     align: 'center',

package/admin/columns/User.ts

@@ -11,6 +11,7 @@ import * as Col from '@xh/hoist/cmp/grid/columns';
 
 export const user: ColumnSpec = {
     field: {name: 'user', type: 'string'},
+    chooserGroup: 'User',
     width: 250
 };
 
@@ -22,16 +23,19 @@ export const username: ColumnSpec = {
         isDimension: true,
         aggregator: 'UNIQUE'
     },
+    chooserGroup: 'User',
     width: 160
 };
 
 export const email: ColumnSpec = {
     field: {name: 'email', type: 'string'},
+    chooserGroup: 'User',
     width: 200
 };
 
 export const displayName: ColumnSpec = {
     field: {name: 'displayName', type: 'string'},
+    chooserGroup: 'User',
     width: 200
 };
 
@@ -45,11 +49,13 @@ export const roles: ColumnSpec = {
 
 export const impersonating: ColumnSpec = {
     field: {name: 'impersonating', type: 'string'},
+    chooserGroup: 'User',
     width: 140
 };
 
 export const impersonatingFlag: ColumnSpec = {
     field: {name: 'impersonatingFlag', type: 'bool'},
+    chooserGroup: 'User',
     headerName: Icon.impersonate(),
     headerTooltip: 'Indicates if the user was impersonating another user during tracked activity.',
     excludeFromExport: true,

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -6,6 +6,7 @@
  */
 import {exportFilename, getAppModel} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
+import {elapsedRenderer} from '@xh/hoist/admin/columns';
 import {
     ActivityTrackingDataFieldSpec,
     DataFieldsEditorModel
@@ -16,7 +17,7 @@ import {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/gr
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec, StoreRecord} from '@xh/hoist/data';
-import {dateRenderer, dateTimeSecRenderer, fmtNumber, numberRenderer} from '@xh/hoist/format';
+import {dateRenderer, dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import {compact, get, isEmpty, isEqual, round} from 'lodash';
@@ -46,6 +47,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
     get dataFieldCols(): ColumnSpec[] {
         return this.dataFields.map(df => ({
             field: df,
+            chooserGroup: 'Data Fields',
             renderer: this.getDfRenderer(df),
             appData: {showInAggGrid: !!df.aggregator}
         }));
@@ -329,6 +331,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             Col.dayRange.field,
             Col.device.field,
             Col.elapsed.field,
+            Col.elapsedMax.field,
             Col.entryCount.field,
             Col.impersonating.field,
             Col.instance.field,
@@ -349,7 +352,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
     private createFilterChooserModel(): FilterChooserModel {
         // TODO - data fields?
         const ret = new FilterChooserModel({
-            persistWith: {...this.persistWith, persistFavorites: false},
+            persistWith: {
+                ...this.persistWith,
+                // Faves persisted to local storage (vs trapped within a single VM view)
+                persistFavorites: {localStorageKey: 'xhAdminActivityTabState'}
+            },
             fieldSpecs: [
                 {field: 'appEnvironment', displayName: 'Environment'},
                 {field: 'appVersion'},
@@ -358,16 +365,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {field: 'correlationId'},
                 {field: 'data'},
                 {field: 'device'},
-                {
-                    field: 'elapsed',
-                    valueRenderer: v => {
-                        return fmtNumber(v, {
-                            label: 'ms',
-                            formatConfig: {thousandSeparated: false, mantissa: 0}
-                        });
-                    },
-                    fieldType: 'number'
-                },
+                {field: 'elapsed', fieldType: 'number', valueRenderer: elapsedRenderer},
                 {field: 'instance'},
                 {field: 'loadId'},
                 {field: 'msg', displayName: 'Message'},
@@ -403,7 +401,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
 
     private createGroupingChooserModel(): GroupingChooserModel {
         return new GroupingChooserModel({
-            persistWith: {...this.persistWith, persistFavorites: false},
+            persistWith: {
+                ...this.persistWith,
+                // Faves persisted to local storage (vs trapped within a single VM view)
+                persistFavorites: {localStorageKey: 'xhAdminActivityTabState'}
+            },
             dimensions: this.cube.dimensions,
             initialValue: ['username', 'category']
         });
@@ -440,10 +442,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {...Col.browser, hidden},
                 {...Col.userAgent, hidden},
                 {...Col.impersonating, hidden},
-                {...Col.elapsed, headerName: 'Elapsed (avg)', hidden},
+                {...Col.elapsed, displayName: 'Elapsed (avg)', hidden},
+                {...Col.elapsedMax, displayName: 'Elapsed (max)', hidden},
                 {...Col.dayRange, hidden},
                 {...Col.entryCount},
-                {field: 'count', hidden},
+                {field: 'count', chooserGroup: 'Core Data', hidden},
                 {...Col.appEnvironment, hidden},
                 {...Col.appVersion, hidden},
                 {...Col.loadId, hidden},
@@ -464,6 +467,9 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             raw.month = raw.day.format(this._monthFormat);
             raw.dayRange = {min: raw.day, max: raw.day};
 
+            // Workaround lack of support for multiple aggregations on the same field.
+            raw.elapsedMax = raw.elapsed;
+
             const data = JSON.parse(raw.data);
             if (isEmpty(data)) return;
 

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -26,6 +26,7 @@ import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
 
 export const activityTrackingPanel = hoistCmp.factory({
+    displayName: 'ActivityTrackingPanel',
     model: creates(ActivityTrackingModel),
 
     render({model}) {

package/admin/tabs/activity/tracking/chart/AggChartModel.ts

@@ -45,14 +45,9 @@ export class AggChartModel extends HoistModel {
         if (!activityTrackingModel) return [];
 
         const ret: SelectOption[] = [
-            {
-                label: 'Entries [count]',
-                value: 'entryCount'
-            },
-            {
-                label: 'Elapsed ms [avg]',
-                value: 'elapsed'
-            }
+            {label: 'Entries [count]', value: 'entryCount'},
+            {label: 'Elapsed [avg]', value: 'elapsed'},
+            {label: 'Elapsed [max]', value: 'elapsedMax'}
         ];
 
         if (secondaryDim) {
@@ -88,10 +83,16 @@ export class AggChartModel extends HoistModel {
         this.markPersist('metric', {...persistWith, path: 'chartMetric'});
         this.markPersist('incWeekends', {...persistWith, path: 'chartIncWeekends'});
 
-        this.addReaction({
-            track: () => [this.data, this.metric, this.incWeekends],
-            run: () => this.loadChart()
-        });
+        this.addReaction(
+            {
+                track: () => [this.data, this.metric, this.incWeekends],
+                run: () => this.loadChart()
+            },
+            {
+                track: () => this.selectableMetrics,
+                run: () => this.onSelectableMetricsChange()
+            }
+        );
     }
 
     //-----------------
@@ -215,4 +216,11 @@ export class AggChartModel extends HoistModel {
     private getDisplayName(fieldName: string) {
         return this.activityTrackingModel?.getDisplayName(fieldName) ?? fieldName;
     }
+
+    private onSelectableMetricsChange(): void {
+        const {metric} = this;
+        if (!this.selectableMetrics.some(it => it.value === metric)) {
+            this.metric = this.selectableMetrics[0]?.value;
+        }
+    }
 }

package/admin/tabs/activity/tracking/chart/AggChartPanel.ts

@@ -14,6 +14,7 @@ import {Icon} from '@xh/hoist/icon/Icon';
 import {AggChartModel} from './AggChartModel';
 
 export const aggChartPanel = hoistCmp.factory({
+    displayName: 'AggChartPanel',
     model: creates(AggChartModel),
 
     render({model, ...props}) {

package/admin/tabs/activity/tracking/datafields/DataFieldsEditor.ts

@@ -12,6 +12,7 @@ import {popover} from '@xh/hoist/kit/blueprint';
 import {isEmpty} from 'lodash';
 
 export const dataFieldsEditor = hoistCmp.factory({
+    displayName: 'DataFieldsEditor',
     model: uses(DataFieldsEditorModel),
 
     render({model}) {

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

@@ -186,7 +186,7 @@ export class ActivityDetailModel extends HoistModel {
                 {...Col.instance, hidden},
                 {...Col.urlPathOnly},
                 {...Col.data, hidden},
-                {...Col.dateCreatedNoYear, displayName: 'Timestamp'},
+                {...Col.dateCreatedNoYear, displayName: 'Timestamp', chooserGroup: 'Core Data'},
                 ...dataFieldCols
             ].map(it => {
                 const fieldName = isString(it.field) ? it.field : it.field.name;

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -22,6 +22,7 @@ import {isNil} from 'lodash';
 import {ActivityDetailModel} from './ActivityDetailModel';
 
 export const activityDetailView = hoistCmp.factory({
+    displayName: 'ActivityDetailView',
     model: creates(ActivityDetailModel),
 
     render({model, ...props}) {

package/admin/tabs/client/errors/ClientErrorsModel.ts

@@ -38,7 +38,9 @@ export class ClientErrorsModel extends HoistModel {
         this.startDay = this.defaultStartDay;
         this.endDay = this.defaultEndDay;
 
-        const hidden = true;
+        const hidden = true,
+            pinned = true;
+
         this.gridModel = new GridModel({
             persistWith: this.persistWith,
             colChooserModel: true,
@@ -50,11 +52,11 @@ export class ClientErrorsModel extends HoistModel {
             emptyText: 'No errors reported...',
             sortBy: 'dateCreated|desc',
             columns: [
-                {...Col.userMessageFlag},
-                {...Col.userAlertedFlag},
-                {...Col.impersonatingFlag},
                 {...Col.entryId, hidden},
-                {...Col.username},
+                {...Col.userMessageFlag, pinned},
+                {...Col.userAlertedFlag, pinned},
+                {...Col.impersonatingFlag, pinned},
+                {...Col.username, pinned},
                 {...Col.impersonating, hidden},
                 {...Col.browser},
                 {...Col.device},
@@ -62,14 +64,8 @@ export class ClientErrorsModel extends HoistModel {
                 {...Col.appVersion},
                 {...Col.appEnvironment},
                 {...Col.msg, displayName: 'User Message', hidden},
-                {
-                    field: {name: 'errorName', type: 'string'},
-                    autosizeMaxWidth: 400
-                },
-                {
-                    field: {name: 'errorMessage', type: 'string'},
-                    autosizeMaxWidth: 400
-                },
+                {...Col.errorName},
+                {...Col.errorMessage},
                 {...Col.error, hidden},
                 {...Col.url},
                 {...Col.correlationId},

package/build/types/admin/columns/Tracking.d.ts

@@ -12,10 +12,14 @@ export declare const day: ColumnSpec;
 export declare const dayRange: ColumnSpec;
 export declare const device: ColumnSpec;
 export declare const deviceIcon: ColumnSpec;
+export declare const elapsedRenderer: (v: number) => import("react").ReactNode;
 export declare const elapsed: ColumnSpec;
+export declare const elapsedMax: ColumnSpec;
 export declare const entryCount: ColumnSpec;
 export declare const entryId: ColumnSpec;
 export declare const error: ColumnSpec;
+export declare const errorMessage: ColumnSpec;
+export declare const errorName: ColumnSpec;
 export declare const instance: ColumnSpec;
 export declare const loadId: ColumnSpec;
 export declare const msg: ColumnSpec;

package/build/types/admin/tabs/activity/tracking/chart/AggChartModel.d.ts

@@ -30,4 +30,5 @@ export declare class AggChartModel extends HoistModel {
     private loadChart;
     private getSeriesData;
     private getDisplayName;
+    private onSelectableMetricsChange;
 }

package/desktop/cmp/grouping/GroupingChooser.scss

@@ -137,6 +137,10 @@
       color: var(--xh-text-color);
     }
 
+    .xh-toolbar--compact & {
+      height: 15px;
+    }
+
     // Matched to FilterChooser equivalent.
     & > .svg-inline--fa {
       width: 12px;

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -47,8 +47,10 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
  * @see GroupingChooserModel
  */
 export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingChooserProps>({
+    displayName: 'GroupingChooser',
     model: uses(GroupingChooserModel),
     className: 'xh-grouping-chooser',
+
     render(
         {
             model,
@@ -103,15 +105,13 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                 ),
                 content: favoritesIsOpen
                     ? favoritesMenu({testId: favoritesMenuTestId})
-                    : editorIsOpen
-                      ? editor({
-                            popoverWidth,
-                            popoverMinHeight,
-                            popoverTitle,
-                            emptyText,
-                            testId: editorTestId
-                        })
-                      : null,
+                    : editor({
+                          popoverWidth,
+                          popoverMinHeight,
+                          popoverTitle,
+                          emptyText,
+                          testId: editorTestId
+                      }),
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&

package/package.json

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