Add GroupingChooserModel.setDimensions()

cmp/grouping/GroupingChooserModel.ts

@@ -13,17 +13,17 @@ import {
     PlainObject,
     XH
 } from '@xh/hoist/core';
-import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
 import {genDisplayName} from '@xh/hoist/data';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     cloneDeep,
     difference,
-    isFunction,
     isArray,
     isEmpty,
     isEqual,
+    isFunction,
     isString,
     keys,
     sortBy
@@ -84,7 +84,8 @@ export class GroupingChooserModel extends HoistModel {
 
     @observable.ref favorites: string[][] = [];
 
-    dimensions: Record<string, DimensionSpec>;
+    @observable.ref private _dimensions: Record<string, DimensionSpec>;
+
     dimensionNames: string[];
     allowEmpty: boolean;
     maxDepth: number;
@@ -106,6 +107,11 @@ export class GroupingChooserModel extends HoistModel {
         return difference(this.dimensionNames, this.pendingValue);
     }
 
+    @computed
+    get dimensions() {
+        return this._dimensions;
+    }
+
     @computed
     get isValid(): boolean {
         return this.validateValue(this.pendingValue);
@@ -132,13 +138,15 @@ export class GroupingChooserModel extends HoistModel {
         super();
         makeObservable(this);
 
-        this.dimensions = this.normalizeDimensions(dimensions);
-        this.dimensionNames = keys(this.dimensions);
+        this.setDimensions(dimensions);
         this.allowEmpty = allowEmpty;
         this.maxDepth = maxDepth;
         this.commitOnChange = commitOnChange;
 
-        throwIf(isEmpty(this.dimensions), 'Must provide valid dimensions available for selection.');
+        throwIf(
+            isEmpty(this._dimensions),
+            'Must provide valid dimensions available for selection.'
+        );
 
         // Read and validate value and favorites
         let value = isFunction(initialValue) ? initialValue() : initialValue,
@@ -187,6 +195,13 @@ export class GroupingChooserModel extends HoistModel {
         this.setFavorites(favorites);
     }
 
+    @action
+    setDimensions(dimensions: Array<DimensionSpec | string>) {
+        this._dimensions = this.normalizeDimensions(dimensions);
+        this.dimensionNames = keys(this._dimensions);
+        this.cleanStaleDims();
+    }
+
     @action
     setValue(value: string[]) {
         if (!this.validateValue(value)) {
@@ -284,12 +299,14 @@ export class GroupingChooserModel extends HoistModel {
         return {displayName: genDisplayName(src.name), ...src};
     }
 
-    getValueLabel(value: string[]) {
-        return value.map(dimName => this.getDimDisplayName(dimName)).join(' › ');
+    getValueLabel(value: string[]): string {
+        return (
+            value.map(dimName => this.getDimDisplayName(dimName)).join(' › ') ?? value.toString()
+        );
     }
 
     getDimDisplayName(dimName: string) {
-        return this.dimensions[dimName].displayName;
+        return this._dimensions[dimName]?.displayName ?? dimName;
     }
 
     //--------------------
@@ -343,4 +360,15 @@ export class GroupingChooserModel extends HoistModel {
         if (this.persistFavorites) ret.favorites = this.favorites;
         return ret;
     }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private cleanStaleDims() {
+        const {value, dimensionNames, allowEmpty} = this,
+            newValue = value?.filter(dim => dimensionNames.includes(dim));
+        isEmpty(newValue) && !allowEmpty
+            ? this.setValue([this.dimensionNames[0]])
+            : this.setValue(newValue);
+    }
 }