Persistence Manager

client-app/src/examples/portfolio/GridPanelModel.ts

@@ -1,16 +1,14 @@
 import {HoistModel, managed} from '@xh/hoist/core';
-import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable} from '@xh/hoist/mobx';
 import {GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
-import {PERSIST_MAIN} from './AppModel';
 import {mktValCol, nameCol, pnlCol} from '../../core/columns';
 import {PortfolioPanelModel} from './PortfolioPanelModel';
 import {capitalize} from 'lodash';
 
 export class GridPanelModel extends HoistModel {
     @bindable loadTimestamp: number;
 
-    @managed
-    gridModel: GridModel;
+    @managed gridModel: GridModel;
 
     parentModel: PortfolioPanelModel;
 
@@ -22,16 +20,30 @@ export class GridPanelModel extends HoistModel {
         return this.parentModel.groupingChooserModel.value.map(it => capitalize(it)).join(' › ');
     }
 
-    constructor({parentModel}) {
+    constructor({persistWith, parentModel}) {
         super();
         makeObservable(this);
         this.parentModel = parentModel;
-        this.gridModel = this.createGridModel();
+        this.gridModel = this.createGridModel(persistWith);
     }
 
-    private createGridModel() {
+    @action
+    updateState(newState) {
+        const {gridModel} = this;
+        const gridPm = gridModel.persistenceModel;
+        gridPm.state = newState.portfolioAppGridState;
+
+        gridPm.updateGridColumns();
+        gridPm.updateGridSort();
+    }
+
+    //------------------
+    // Implementation
+    //------------------
+
+    private createGridModel(persistWith) {
         return new GridModel({
-            persistWith: PERSIST_MAIN,
+            persistWith: {path: 'portfolioAppGridState', ...persistWith},
             treeMode: true,
             treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
             sortBy: 'pnl|desc|abs',

client-app/src/examples/portfolio/PortfolioPanel.ts

@@ -1,18 +1,29 @@
 import {hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {detailPanel} from './detail/DetailPanel';
 import {gridPanel} from './GridPanel';
 import {mapPanel} from './MapPanel';
 import {PortfolioPanelModel} from './PortfolioPanelModel';
+import {persistenceManager} from '@xh/hoist/desktop/cmp/persistenceManager';
 
 export const portfolioPanel = hoistCmp.factory({
     model: creates(PortfolioPanelModel),
 
     render() {
         return panel({
+            tbar: tbar(),
             mask: 'onLoad',
             items: [hframe(gridPanel(), mapPanel()), detailPanel()]
         });
     }
 });
+
+const tbar = hoistCmp.factory<PortfolioPanelModel>({
+    render() {
+        return toolbar({
+            item: persistenceManager()
+        });
+    }
+});

client-app/src/examples/portfolio/PortfolioPanelModel.ts

@@ -1,18 +1,27 @@
 import {HoistModel, managed, XH} from '@xh/hoist/core';
 import {Store} from '@xh/hoist/data';
+import {logInfo} from '@xh/hoist/utils/js';
 import {GridPanelModel} from './GridPanelModel';
 import {round} from 'lodash';
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {PERSIST_MAIN} from './AppModel';
-import {waitFor} from '@xh/hoist/promise';
+import {wait, waitFor} from '@xh/hoist/promise';
 import {SECONDS} from '@xh/hoist/utils/datetime';
+import {PersistenceManagerModel} from '@xh/hoist/desktop/cmp/persistenceManager';
+import {DetailPanelModel} from './detail/DetailPanelModel';
+import {runInAction} from '@xh/hoist/mobx';
 
 export class PortfolioPanelModel extends HoistModel {
     @managed session;
 
-    @managed groupingChooserModel = this.createGroupingChooserModel();
+    @managed persistenceManagerModel: PersistenceManagerModel;
+    @managed groupingChooserModel: GroupingChooserModel;
     @managed store = this.createStore();
-    @managed gridPanelModel = new GridPanelModel({parentModel: this});
+    @managed gridPanelModel: GridPanelModel;
+    @managed detailPanelModel: DetailPanelModel;
+
+    get prefKey(): string {
+        return 'portfolioExample';
+    }
 
     get selectedPosition() {
         return this.gridPanelModel.selectedRecord;
@@ -21,16 +30,40 @@ export class PortfolioPanelModel extends HoistModel {
     constructor() {
         super();
         const wsService = XH.webSocketService;
+
+        this.persistenceManagerModel = new PersistenceManagerModel({
+            type: 'portfoioExample',
+            noun: 'portfoio',
+            canManageGlobal: () => XH.getUser().hasRole('HOIST_ADMIN'),
+            onChangeAsync: () => this.onViewChangeAsync(),
+            newObjectFnAsync: async () => ({
+                portfolioAppGridState: {},
+                portfolioAppDetailState: {},
+                groupingChooser: {value: ['region', 'sector', 'symbol'], favorites: []}
+            }),
+            persistWith: {prefKey: this.prefKey}
+        });
+
+        this.groupingChooserModel = this.createGroupingChooserModel();
+        this.detailPanelModel = this.createDetailPanelModel();
+        this.gridPanelModel = this.createGridPanelModel();
+
         this.addReaction({
             track: () => [this.groupingChooserModel.value, wsService.connected],
             run: () => this.loadAsync()
         });
+        this.addReaction({
+            track: () => this.selectedPosition,
+            run: position => {
+                this.detailPanelModel.positionId = position?.id ?? null;
+            },
+            debounce: 300
+        });
     }
 
     override async doLoadAsync(loadSpec) {
         const wsService = XH.webSocketService,
-            {store, groupingChooserModel, gridPanelModel} = this,
-            dims = groupingChooserModel.value;
+            {store, gridPanelModel} = this;
 
         let {session} = this;
         session?.destroy();
@@ -41,6 +74,9 @@ export class PortfolioPanelModel extends HoistModel {
         );
         if (loadSpec.isStale) return;
 
+        const dims = this.persistenceManagerModel.provider.getData().groupingChooser?.value;
+        if (!dims) return;
+
         session = await XH.portfolioService.getLivePositionsAsync(dims, 'mainApp').catchDefault();
 
         store.loadData([session.initialPositions.root]);
@@ -79,7 +115,43 @@ export class PortfolioPanelModel extends HoistModel {
         return new GroupingChooserModel({
             dimensions: ['fund', 'model', 'region', 'sector', 'symbol', 'trader'],
             initialValue: ['region', 'sector', 'symbol'],
-            persistWith: PERSIST_MAIN
+            persistWith: {...this.persistenceManagerModel.provider},
+            allowEmpty: true
         });
     }
+
+    private createGridPanelModel() {
+        return new GridPanelModel({
+            persistWith: this.persistenceManagerModel.provider,
+            parentModel: this
+        });
+    }
+
+    private createDetailPanelModel() {
+        return new DetailPanelModel({
+            persistWith: this.persistenceManagerModel.provider,
+            parentModel: this
+        });
+    }
+
+    private async onViewChangeAsync() {
+        const start = Date.now();
+
+        await wait(); // allow masking to start
+
+        const {persistenceManagerModel, gridPanelModel, detailPanelModel, groupingChooserModel} =
+                this,
+            newState = persistenceManagerModel.provider.getData();
+        groupingChooserModel.setValue(newState.groupingChooser?.value ?? []);
+        gridPanelModel.updateState(newState);
+
+        runInAction(() => {
+            const detailPm = detailPanelModel.ordersPanelModel.gridModel.persistenceModel;
+            detailPm.state = newState.portfolioAppDetailState;
+            detailPm.updateGridColumns();
+            detailPm.updateGridSort();
+        });
+
+        logInfo(`Rebuilt view | took ${Date.now() - start}ms`, this);
+    }
 }

client-app/src/examples/portfolio/detail/DetailPanel.ts

@@ -1,13 +1,13 @@
 import {hframe, placeholder} from '@xh/hoist/cmp/layout';
-import {hoistCmp, creates} from '@xh/hoist/core';
+import {hoistCmp, uses} from '@xh/hoist/core';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon/Icon';
 import {chartsPanel} from './charts/ChartsPanel';
 import {DetailPanelModel} from './DetailPanelModel';
 import {ordersPanel} from './OrdersPanel';
 
 export const detailPanel = hoistCmp.factory({
-    model: creates(DetailPanelModel),
+    model: uses(DetailPanelModel),
 
     render({model}) {
         const {panelSizingModel, positionId} = model;

client-app/src/examples/portfolio/detail/DetailPanelModel.ts

@@ -1,4 +1,4 @@
-import {HoistModel, lookup, managed} from '@xh/hoist/core';
+import {HoistModel, managed} from '@xh/hoist/core';
 import {observable, makeObservable} from '@xh/hoist/mobx';
 import {PanelModel} from '@xh/hoist/desktop/cmp/panel';
 import {OrdersPanelModel} from './OrdersPanelModel';
@@ -8,8 +8,7 @@ import {PortfolioPanelModel} from '../PortfolioPanelModel';
 export class DetailPanelModel extends HoistModel {
     @observable positionId = null;
 
-    @lookup(PortfolioPanelModel) parentModel;
-    @managed ordersPanelModel = new OrdersPanelModel(this);
+    @managed ordersPanelModel: OrdersPanelModel;
 
     @managed panelSizingModel = new PanelModel({
         defaultSize: 400,
@@ -20,22 +19,16 @@ export class DetailPanelModel extends HoistModel {
         persistWith: PERSIST_DETAIL
     });
 
+    parentModel: PortfolioPanelModel;
+
     get collapsed() {
         return this.panelSizingModel.collapsed;
     }
 
-    constructor() {
+    constructor({persistWith, parentModel}) {
         super();
         makeObservable(this);
-    }
-
-    override onLinked() {
-        this.addReaction({
-            track: () => this.parentModel.selectedPosition,
-            run: position => {
-                this.positionId = position?.id ?? null;
-            },
-            debounce: 300
-        });
+        this.parentModel = parentModel;
+        this.ordersPanelModel = new OrdersPanelModel({persistWith, parentModel: this});
     }
 }

client-app/src/examples/portfolio/detail/OrdersPanelModel.ts

@@ -28,7 +28,7 @@ export class OrdersPanelModel extends HoistModel {
         return this.parentModel.positionId;
     }
 
-    constructor(parentModel) {
+    constructor({persistWith, parentModel}) {
         super();
 
         this.parentModel = parentModel;
@@ -42,7 +42,7 @@ export class OrdersPanelModel extends HoistModel {
             enableExport: true,
             rowBorders: true,
             showHover: true,
-            persistWith: {...PERSIST_DETAIL, path: 'ordersGrid'},
+            persistWith: {path: 'portfolioAppDetailState', ...persistWith},
             columns: [
                 {...symbolCol, pinned: true},
                 {...closingPriceSparklineCol},