@adaptabletools/adaptable 16.0.9 → 16.1.0-canary.0

package/src/agGrid/agGridMenuHelper.js

@@ -6,6 +6,8 @@ const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const icons_1 = require("../components/icons");
 const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
 const Icon_1 = require("../components/Icon");
+const logDeprecation_1 = require("../Utilities/logDeprecation");
+const MenuOptions_1 = require("../AdaptableOptions/MenuOptions");
 // tslint:disable-next-line: class-name
 class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
@@ -16,139 +18,183 @@ class agGridMenuHelper {
         this.adaptable = null;
         this.gridOptions = null;
     }
-    buildColumnMenu(params, originalgetMainMenuItems) {
-        // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
-        const colId = params.column.getColId();
-        let agGridColumnMenuItems = [];
-        let adaptableColumnMenuItems = [];
-        let userColumnMenuItems = [];
+    buildColumnMenu(params, originalGetMainMenuItems) {
+        var _a;
         const menuOptions = this.adaptable.adaptableOptions.menuOptions;
-        //First get Ag Grid Column Items
-        agGridColumnMenuItems.push(...this.createAgGridColumnMenuItems(originalgetMainMenuItems, params));
-        let showAdaptableColumnMenu = menuOptions.showAdaptableColumnMenu;
-        let hasAdaptableColumnMenuItems = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
-        if (hasAdaptableColumnMenuItems) {
-            agGridColumnMenuItems.push('separator');
+        this.logMenuDeprecation(menuOptions);
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        if (!params.column) {
+            // return only AG Grid context if the Adaptable column is not found (should not happen)
+            return agGridMenuItems;
         }
-        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(colId);
+        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
-        // then Get Adaptable Menu Items
-        if (menuContext.isRowGroupColumn) {
-            let groupedMenuItem = this.createGroupedColumnMenuItem();
-            if (groupedMenuItem) {
-                adaptableColumnMenuItems.push(groupedMenuItem);
-            }
-        }
-        //  if (adaptableColumn != undefined) {
-        if (hasAdaptableColumnMenuItems) {
-            adaptableColumnMenuItems.push(...this.createAdaptableColumnMenuItems(adaptableColumn, menuContext));
-        }
-        //   }
-        // Finally get all the User Menu Items
-        userColumnMenuItems.push(...this.createUserColumnMenuItems(menuContext));
-        const map = {
-            aggrid: agGridColumnMenuItems,
-            adaptable: adaptableColumnMenuItems,
-            user: userColumnMenuItems,
-        };
-        const menuItemsArray = menuOptions.columnMenuOrder;
-        let arr = [];
-        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
-            arr = menuItemsArray({
-                adaptableApi: this.adaptable.api,
-                userName: this.adaptable.adaptableOptions.userName,
-                adaptableId: this.adaptable.adaptableOptions.adaptableId,
-                column: adaptableColumn,
-            });
-        }
-        else {
-            arr = menuItemsArray;
+        const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
+        // sort Adaptable menu items by default order
+        adaptableMenuItems.sort((first, second) => {
+            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(first.module);
+            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(second.module);
+            return firstPriority - secondPriority;
+        });
+        // 1. first check if there is a custom column menu defined
+        if (typeof menuOptions.customColumnMenu === 'function') {
+            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
+                menuType: 'AgGrid',
+                name: itemName,
+            }));
+            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const customMenuItems = menuOptions
+                .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
+                defaultAdaptableMenuItems }))
+                .filter(Boolean);
+            return customMenuItems
+                .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
+                .filter(Boolean);
         }
-        return (0, flatten_1.default)(arr.map((c) => {
-            return map[c];
-        }));
+        // !! Uncomment once the deprecated options are removed
+        // 2. if not, return the default context menu
+        // const defaultContextMenu: (string | MenuItemDef)[] = [
+        //   ...agGridMenuItems,
+        //   'separator',
+        //   ...adaptableMenuItems.map((adaptableItem) =>
+        //     this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)
+        //   ),
+        // ];
+        // return defaultContextMenu;
+        return this.buildColumnMenuDeprecated(params, originalGetMainMenuItems);
     }
-    buildContextMenu(params, originalgetContextMenuItems) {
+    buildContextMenu(params, originalGetContextMenuItems) {
+        var _a;
         // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
         // (right-click selected the current cell, but this was not reflected in the internal state of the selected cells)
         this.adaptable.setSelectedCells();
-        let agGridContextMenuItems = [];
-        let adaptableContextMenuItems = [];
-        let userContextMenuItems = [];
         const menuOptions = this.adaptable.adaptableOptions.menuOptions;
-        let showAdaptableContextMenu = menuOptions.showAdaptableContextMenu;
-        let hasAdaptableContextMenuItems = showAdaptableContextMenu == null || showAdaptableContextMenu !== false;
-        let userDefinedContextMenuItems = menuOptions.contextMenuItems;
-        let hasUserDefinedContextMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userDefinedContextMenuItems);
-        const agGridMenuItems = this.createAgGridContextMenuItems(originalgetContextMenuItems, params);
-        if (agGridMenuItems === null || agGridMenuItems === void 0 ? void 0 : agGridMenuItems.length) {
-            agGridContextMenuItems.push(...agGridMenuItems);
-            if (hasAdaptableContextMenuItems || hasUserDefinedContextMenuItems) {
-                agGridContextMenuItems.push('separator');
-            }
+        this.logMenuDeprecation(menuOptions);
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        if (!params.column) {
+            // return only AG Grid context if the Adaptable column is not found (should not happen)
+            return agGridMenuItems;
         }
-        const adaptableMenuItems = [];
-        const agGridColumn = params.column;
-        let adaptableColumn;
-        if (agGridColumn) {
-            adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(agGridColumn.getColId());
-            // if (adaptableColumn != undefined) {
-            let menuContext = this.createContextMenuContextObject(params, adaptableColumn);
-            // keep it simple for now - if its a grouped cell then don't add the shipped menu items
-            // if (adaptableColumn && !params.node.group) {
-            const allAdaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
-            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(allAdaptableMenuItems)) {
-                adaptableMenuItems.push(...allAdaptableMenuItems);
-            }
-            // }
-            // create agGrid Menu items based on Adaptable Menu Items - user can decide whether to show or not
-            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(adaptableMenuItems) && hasAdaptableContextMenuItems) {
-                adaptableContextMenuItems.push(...this.createAgGridAdaptableContextMenuItems(adaptableMenuItems, menuContext));
-            }
-            // create agGrid Menu items based on User Menu Items - user can decide whether to show or not
-            if (hasUserDefinedContextMenuItems) {
-                userContextMenuItems.push(...this.createAgGridUserContextMenuItems(userDefinedContextMenuItems, menuContext));
+        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
+        const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
+        const adaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
+        // sort Adaptable menu items by default order
+        adaptableMenuItems.sort((first, second) => {
+            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(first.module);
+            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(second.module);
+            return firstPriority - secondPriority;
+        });
+        // 1. first check if there is a custom context menu defined
+        if (typeof menuOptions.customContextMenu === 'function') {
+            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
+                menuType: 'AgGrid',
+                name: itemName,
+            }));
+            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const customMenuItems = menuOptions
+                .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
+                defaultAdaptableMenuItems }))
+                .filter(Boolean);
+            return customMenuItems
+                .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
+                .filter(Boolean);
+        }
+        // !! Uncomment once the deprecated options are removed
+        // 2. if not, return the default context menu
+        // const defaultContextMenu: (string | MenuItemDef)[] = [
+        //   ...agGridMenuItems,
+        //   'separator',
+        //   ...adaptableMenuItems.map((adaptableItem) =>
+        //     this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)
+        //   ),
+        // ];
+        // return defaultContextMenu;
+        return this.buildContextMenuDeprecated(params, originalGetContextMenuItems);
+    }
+    createAdaptableColumnMenuItems(menuContext) {
+        let contextMenuItems = [];
+        this.adaptable.adaptableModules.forEach((s) => {
+            let menuItems = s.addColumnMenuItems(menuContext.adaptableColumn);
+            if (menuItems) {
+                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
+        });
+        return contextMenuItems;
+    }
+    mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext) {
+        var _a;
+        if (customMenuItem === '-') {
+            return 'separator';
         }
-        const map = {
-            aggrid: agGridContextMenuItems,
-            adaptable: adaptableContextMenuItems,
-            user: userContextMenuItems,
-        };
-        const menuItemsArray = menuOptions.contextMenuOrder;
-        let arr = [];
-        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
-            arr = menuItemsArray({
-                adaptableApi: this.adaptable.api,
-                userName: this.adaptable.adaptableOptions.userName,
-                adaptableId: this.adaptable.adaptableOptions.adaptableId,
-                column: adaptableColumn,
-            });
+        if (customMenuItem.menuType === 'Group') {
+            return {
+                name: customMenuItem.label,
+                icon: this.mapAdaptableIconToAgGridIcon(customMenuItem.icon, {
+                    fill: 'var(--ab-color-text-on-primary)',
+                }),
+                disabled: customMenuItem.disabled,
+                subMenu: !customMenuItem.disabled
+                    ? (_a = customMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext)).filter(Boolean)
+                    : undefined,
+            };
         }
-        else {
-            arr = menuItemsArray;
+        if (customMenuItem.menuType === 'AgGrid') {
+            return customMenuItem.name;
         }
-        return (0, flatten_1.default)(arr.map((c) => {
-            return map[c];
-        }));
+        if (customMenuItem.menuType === 'Adaptable') {
+            return this.mapAdaptableMenuItemToAgGridMenuDefinition(customMenuItem);
+        }
+        if (customMenuItem.menuType === 'User') {
+            return this.mapUserMenuItemToAgGridMenuDefinition(customMenuItem, menuContext);
+        }
+    }
+    mapAdaptableMenuItemToAgGridMenuDefinition(adaptableMenuItem) {
+        var _a;
+        return {
+            name: adaptableMenuItem.label,
+            action: adaptableMenuItem.onClick
+                ? adaptableMenuItem.onClick
+                : adaptableMenuItem.reduxAction
+                    ? () => this.adaptable.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
+                    : undefined,
+            icon: this.mapAdaptableIconToAgGridIcon(adaptableMenuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
+            subMenu: (_a = adaptableMenuItem.subItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
+        };
     }
-    //}
-    //  return flatten(
-    //    arr.map((c) => {
-    //      return map[c];
-    //    })
-    // );
-    createRemoveGroupsMenuItem(x) {
+    mapUserMenuItemToAgGridMenuDefinition(userMenuItem, menuContext) {
+        var _a;
+        if (userMenuItem.hidden) {
+            return;
+        }
         return {
-            name: x.label,
-            action: x.onClick
-                ? x.onClick
-                : () => this.adaptable.api.internalApi.dispatchReduxAction(x.reduxAction),
-            icon: this.mapAdaptableIconToAgGridIcon(x.icon, {
+            name: userMenuItem.label,
+            action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
+            icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
+            disabled: userMenuItem.disabled,
+            subMenu: (_a = userMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => {
+                return this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext);
+            }).filter(Boolean),
         };
     }
+    logMenuDeprecation(menuOptions) {
+        const deprecatedProps = [
+            'contextMenuItems',
+            'contextMenuOrder',
+            'showAdaptableContextMenu',
+            'columnMenuItems',
+            'columnMenuOrder',
+            'showAdaptableColumnMenu',
+        ];
+        deprecatedProps.forEach((propName) => {
+            if (menuOptions[propName]) {
+                (0, logDeprecation_1.logDeprecation)(this.adaptable.logger, 'MenuOptions', propName, 'customContextMenu');
+            }
+        });
+    }
     createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem) {
         const subMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(adaptableMenuItem.subItems)
             ? adaptableMenuItem.subItems.map((amu) => {
@@ -171,10 +217,11 @@ class agGridMenuHelper {
     createAgGridColumnMenuDefFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         const disabled = menuItem.disabled && menuItem.disabled(menuContext);
+        const icon = typeof menuItem.icon === 'function' ? menuItem.icon(menuContext) : menuItem.icon;
         return {
             name: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: this.mapAdaptableIconToAgGridIcon(menuItem.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
             disabled: disabled,
@@ -188,10 +235,11 @@ class agGridMenuHelper {
     createAgGridContextMenuDefFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         const disabled = menuItem.disabled && menuItem.disabled(menuContext);
+        const icon = typeof menuItem.icon === 'function' ? menuItem.icon(menuContext) : menuItem.icon;
         return {
             name: this.getLabelFromUserContextMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: this.mapAdaptableIconToAgGridIcon(menuItem.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
             disabled: disabled,
@@ -222,6 +270,7 @@ class agGridMenuHelper {
     createAdaptableColumnMenuItemFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         let adaptableMenuItem = {
+            module: 'General',
             label: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             reduxAction: null,
             onClick: () => (fn ? fn(menuContext) : null),
@@ -236,25 +285,16 @@ class agGridMenuHelper {
             ? originalgetMainMenuItems(params)
             : params.defaultItems.slice(0);
     }
-    createGroupedColumnMenuItem() {
-        if (this.adaptable.adaptableOptions.menuOptions.showUngroupColumnMenuItem) {
-            let groupedCols = this.gridOptions.columnApi.getRowGroupColumns();
-            let ungroupMenuItem = {
-                label: groupedCols.length == 1 ? 'Ungroup Column' : 'Ungroup All',
-                onClick: () => this.gridOptions.columnApi.setRowGroupColumns([]),
-                isVisible: true,
-                icon: {
-                    name: 'undo',
-                },
-            };
-            let menuItem = this.createAgGridMenuDefFromAdaptableMenu(ungroupMenuItem);
-            return menuItem;
-        }
-    }
-    createAdaptableColumnMenuItems(adaptableColumn, menuContext) {
+    createAdaptableColumnMenuItems_DEPRECATED(adaptableColumn, menuContext) {
         let columnMenuItems = [];
         // First get all the Module based Adaptable Menu Items
         const adaptableMenuItems = this.getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext);
+        // sort Adaptable menu items by default order
+        adaptableMenuItems.sort((first, second) => {
+            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(first.module);
+            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(second.module);
+            return firstPriority - secondPriority;
+        });
         // And then convert them into Menu Item Defs
         adaptableMenuItems.forEach((adaptableMenuItem) => {
             let menuItem = this.createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem);
@@ -337,18 +377,18 @@ class agGridMenuHelper {
                 : [];
     }
     createAdaptableContextMenuItems(menuContext) {
-        let columnMenuItems = [];
+        let contextMenuItems = [];
         this.adaptable.adaptableModules.forEach((s) => {
             let menuItems = s.addContextMenuItems(menuContext);
             if (menuItems) {
-                columnMenuItems.push(...menuItems);
+                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
         });
         this.adaptable._emitSync('CreateAdaptableContextMenuItems', {
-            items: columnMenuItems,
+            items: contextMenuItems,
             menuContext: menuContext,
         });
-        return columnMenuItems;
+        return contextMenuItems;
     }
     createAgGridAdaptableContextMenuItems(adaptableMenuItems, menuContext) {
         // here we create agGrid Menu items based on Adaptable Menu Items
@@ -447,5 +487,122 @@ class agGridMenuHelper {
         }
         return returnMenuItems;
     }
+    /**
+     *  !!! This should be deleted once MenuOptions loses all the deprecated options
+     */
+    buildContextMenuDeprecated(params, originalGetContextMenuItems) {
+        let agGridContextMenuItems = [];
+        let adaptableContextMenuItems = [];
+        let userContextMenuItems = [];
+        const menuOptions = this.adaptable.adaptableOptions.menuOptions;
+        let showAdaptableContextMenu = menuOptions.showAdaptableContextMenu;
+        let hasAdaptableContextMenuItems = showAdaptableContextMenu == null || showAdaptableContextMenu !== false;
+        let userDefinedContextMenuItems = menuOptions.contextMenuItems;
+        let hasUserDefinedContextMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userDefinedContextMenuItems);
+        const agGridMenuItems = this.createAgGridContextMenuItems(originalGetContextMenuItems, params);
+        if (agGridMenuItems === null || agGridMenuItems === void 0 ? void 0 : agGridMenuItems.length) {
+            agGridContextMenuItems.push(...agGridMenuItems);
+            if (hasAdaptableContextMenuItems || hasUserDefinedContextMenuItems) {
+                agGridContextMenuItems.push('separator');
+            }
+        }
+        const adaptableMenuItems = [];
+        const agGridColumn = params.column;
+        let adaptableColumn;
+        if (agGridColumn) {
+            adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(agGridColumn.getColId());
+            // if (adaptableColumn != undefined) {
+            let menuContext = this.createContextMenuContextObject(params, adaptableColumn);
+            // keep it simple for now - if its a grouped cell then don't add the shipped menu items
+            // if (adaptableColumn && !params.node.group) {
+            const allAdaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
+            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(allAdaptableMenuItems)) {
+                adaptableMenuItems.push(...allAdaptableMenuItems);
+            }
+            adaptableMenuItems.sort((first, second) => {
+                const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(first.module);
+                const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(second.module);
+                return firstPriority - secondPriority;
+            });
+            // }
+            // create agGrid Menu items based on Adaptable Menu Items - user can decide whether to show or not
+            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(adaptableMenuItems) && hasAdaptableContextMenuItems) {
+                adaptableContextMenuItems.push(...this.createAgGridAdaptableContextMenuItems(adaptableMenuItems, menuContext));
+            }
+            // create agGrid Menu items based on User Menu Items - user can decide whether to show or not
+            if (hasUserDefinedContextMenuItems) {
+                userContextMenuItems.push(...this.createAgGridUserContextMenuItems(userDefinedContextMenuItems, menuContext));
+            }
+        }
+        const map = {
+            aggrid: agGridContextMenuItems,
+            adaptable: adaptableContextMenuItems,
+            user: userContextMenuItems,
+        };
+        const menuItemsArray = menuOptions.contextMenuOrder;
+        let arr = [];
+        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
+            arr = menuItemsArray({
+                adaptableApi: this.adaptable.api,
+                userName: this.adaptable.adaptableOptions.userName,
+                adaptableId: this.adaptable.adaptableOptions.adaptableId,
+                column: adaptableColumn,
+            });
+        }
+        else {
+            arr = menuItemsArray;
+        }
+        return (0, flatten_1.default)(arr.map((c) => {
+            return map[c];
+        }));
+    }
+    /**
+     *  !!! This should be deleted once MenuOptions loses all the deprecated options
+     */
+    buildColumnMenuDeprecated(params, originalgetMainMenuItems) {
+        // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
+        const colId = params.column.getColId();
+        let agGridColumnMenuItems = [];
+        let adaptableColumnMenuItems = [];
+        let userColumnMenuItems = [];
+        const menuOptions = this.adaptable.adaptableOptions.menuOptions;
+        //First get Ag Grid Column Items
+        agGridColumnMenuItems.push(...this.createAgGridColumnMenuItems(originalgetMainMenuItems, params));
+        let showAdaptableColumnMenu = menuOptions.showAdaptableColumnMenu;
+        let hasAdaptableColumnMenuItems = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
+        if (hasAdaptableColumnMenuItems) {
+            agGridColumnMenuItems.push('separator');
+        }
+        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(colId);
+        const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
+        //  if (adaptableColumn != undefined) {
+        if (hasAdaptableColumnMenuItems) {
+            adaptableColumnMenuItems.push(...this.createAdaptableColumnMenuItems_DEPRECATED(adaptableColumn, menuContext));
+        }
+        //   }
+        // Finally get all the User Menu Items
+        userColumnMenuItems.push(...this.createUserColumnMenuItems(menuContext));
+        const map = {
+            aggrid: agGridColumnMenuItems,
+            adaptable: adaptableColumnMenuItems,
+            user: userColumnMenuItems,
+        };
+        const menuItemsArray = menuOptions.columnMenuOrder;
+        let arr = [];
+        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
+            arr = menuItemsArray({
+                adaptableApi: this.adaptable.api,
+                userName: this.adaptable.adaptableOptions.userName,
+                adaptableId: this.adaptable.adaptableOptions.adaptableId,
+                column: adaptableColumn,
+            });
+        }
+        else {
+            arr = menuItemsArray;
+        }
+        return (0, flatten_1.default)(arr.map((c) => {
+            return map[c];
+        }));
+    }
 }
 exports.agGridMenuHelper = agGridMenuHelper;

package/src/components/ExpressionEditor/EditorInput.d.ts

@@ -2,7 +2,7 @@
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
 interface EditorInputProps {
-    type: 'boolean' | 'scalar' | 'aggregatedScalar' | 'cumulativeAggregatedScalar';
+    type: 'boolean' | 'scalar' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
     module: AdaptableModule;
     value: string;
     onChange: (value: string) => void;

package/src/components/ExpressionEditor/EditorInput.js

@@ -2,22 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const BaseEditorInput_1 = require("./BaseEditorInput");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
 const EditorContext_1 = require("./EditorContext");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const editorButtonsAggregatedScalar_1 = require("./editorButtonsAggregatedScalar");
-const react_1 = require("react");
 const aggregatedScalarExpressionFunctions_1 = require("../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions");
 const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumulativeAggregatedScalar");
+const editorButtonsQuantileAggregatedScalar_1 = require("./editorButtonsQuantileAggregatedScalar");
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
-        const sourceExpressionFunctions = type === 'aggregatedScalar'
-            ? aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions
-            : aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions;
+        const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
+            ? aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions
+            : type === 'quantileAggregatedScalar'
+                ? aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions
+                : aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions;
         return Object.keys(availableAggregatedExpressionFunctions)
             .filter((key) => sourceExpressionFunctions.includes(key))
             .reduce((obj, key) => {
@@ -26,7 +29,9 @@ function EditorInput(props) {
         }, {});
     };
     const expressionFunctions = (0, react_1.useMemo)(() => {
-        return props.type === 'aggregatedScalar' || props.type === 'cumulativeAggregatedScalar'
+        return props.type === 'aggregatedScalar' ||
+            props.type === 'cumulativeAggregatedScalar' ||
+            props.type === 'quantileAggregatedScalar'
             ? getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type)
             : Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
     }, [props.type]);
@@ -36,6 +41,10 @@ function EditorInput(props) {
             ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar
-                : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' || props.type === 'cumulativeAggregatedScalar', api: props.api }));
+                : props.type === 'quantileAggregatedScalar'
+                    ? editorButtonsQuantileAggregatedScalar_1.editorButtonsQuantileAggregatedScalar
+                    : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
+            props.type === 'cumulativeAggregatedScalar' ||
+            props.type === 'quantileAggregatedScalar', api: props.api }));
 }
 exports.default = EditorInput;

package/src/components/ExpressionEditor/editorButtonsAggregatedScalar.js

@@ -12,11 +12,6 @@ exports.editorButtonsAggregatedScalar = [
         data: 'PERCENTAGE()',
         text: 'Percentage',
     },
-    {
-        functionName: 'AVG',
-        data: 'AVG()',
-        text: 'Average',
-    },
     {
         functionName: 'MIN',
         data: 'MIN()',
@@ -27,16 +22,16 @@ exports.editorButtonsAggregatedScalar = [
         data: 'MAX()',
         text: 'Max',
     },
-    {
-        functionName: 'QUANT',
-        data: 'QUANT()',
-        text: 'Quantile',
-    },
     {
         functionName: 'COUNT',
         data: 'COUNT()',
         text: 'Count',
     },
+    {
+        functionName: 'AVG',
+        data: 'AVG()',
+        text: 'Average',
+    },
     {
         functionName: 'WEIGHT',
         data: 'WEIGHT()',

package/src/components/ExpressionEditor/editorButtonsCumulativeAggregatedScalar.js

@@ -22,11 +22,6 @@ exports.editorButtonsCumulativeAggregatedScalar = [
         data: 'PERCENTAGE()',
         text: 'Percentage',
     },
-    {
-        functionName: 'AVG',
-        data: 'AVG()',
-        text: 'Average',
-    },
     {
         functionName: 'MIN',
         data: 'MIN()',
@@ -37,6 +32,11 @@ exports.editorButtonsCumulativeAggregatedScalar = [
         data: 'MAX()',
         text: 'Max',
     },
+    {
+        functionName: 'AVG',
+        data: 'AVG()',
+        text: 'Average',
+    },
     {
         functionName: 'WEIGHT',
         data: 'WEIGHT()',

package/src/components/ExpressionEditor/editorButtonsQuantileAggregatedScalar.d.ts

@@ -0,0 +1,2 @@
+import { OperatorEditorButton } from './BaseEditorInput';
+export declare const editorButtonsQuantileAggregatedScalar: OperatorEditorButton[];