@adaptabletools/adaptable 18.0.11 → 18.1.0-canary.0

package/src/agGrid/editors/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Icon } from '../../../components/icons';
+import useProperty from '../../../components/utils/useProperty';
+import { NumberInput } from '../../../components/Input/NumberInput';
+const fillStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+};
+const hostStyle = Object.assign(Object.assign({}, fillStyle), { boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center' });
+const inputStyle = {
+    position: 'relative',
+    background: 'transparent',
+    boxSizing: 'border-box',
+    color: 'currentcolor',
+    minWidth: 0,
+    outline: 'none',
+    textAlign: 'right',
+    width: '100%',
+    border: 'none',
+    boxShadow: 'none',
+    paddingRight: '3ch',
+};
+export const InternalAdaptablePercentageEditor = React.forwardRef(function InternalAdaptablePercentageEditorFn(props, ref) {
+    var _a;
+    const inputRef = React.useRef(null);
+    const focus = () => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const [value, setValue] = useProperty(props, 'value', props.defaultValue, {
+        onChange: (value) => {
+            var _a;
+            if (value !== '' && value == Number(value)) {
+                value = Number(value);
+            }
+            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+        },
+    });
+    React.useImperativeHandle(ref, () => {
+        return {
+            focus,
+            setValue,
+        };
+    });
+    const showClear = props.showClearButton && props.emptyValue != null && value != props.emptyValue;
+    return (React.createElement("div", { style: hostStyle, className: "ab-PercentageEditor", onKeyDown: (e) => {
+            if (e.key === 'Tab' && showClear && document.activeElement === inputRef.current) {
+                e.stopPropagation();
+            }
+        } },
+        React.createElement(NumberInput, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'number', className: "ab-PercentageEditor-Input", value: value, noArrows: true, autoFocus: true, onChange: React.useCallback((value) => {
+                setValue(value);
+            }, []), style: inputStyle, ref: inputRef }),
+        showClear ? (React.createElement("div", { style: {
+                display: 'inline-block',
+                marginRight: 'var(--ab-space-1)',
+                marginLeft: 'var(--ab-space-1)',
+            }, onClick: (e) => {
+                if (props.emptyValue != null) {
+                    setValue(props.emptyValue);
+                    e.stopPropagation();
+                    focus();
+                }
+            }, onKeyDown: (e) => {
+                if (props.emptyValue != null && e.key === 'Enter') {
+                    setValue(props.emptyValue);
+                    e.stopPropagation();
+                    focus();
+                }
+            } },
+            React.createElement(Icon, { size: 18, name: "close", tabIndex: 0 }))) : null,
+        React.createElement("div", { style: {
+                position: 'absolute',
+                right: showClear ? 20 : 0,
+                paddingInlineEnd: '0.5ch',
+            } }, "%")));
+});

package/src/agGrid/editors/AdaptablePercentageEditor/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ICellEditorComp } from '@ag-grid-community/core';
+import { AdaptableNumberCellEditorParams } from '../AdaptableNumberEditor';
+/**
+ * Adaptable percentage editor parameters extending the number editor params.
+ */
+export interface AdaptablePercentageCellEditorParams extends AdaptableNumberCellEditorParams {
+}
+export declare const AdaptableReactPercentageEditor: React.ForwardRefExoticComponent<AdaptablePercentageCellEditorParams & React.RefAttributes<unknown>>;
+/**
+ * Used by default for all `abColDefNumber` columns.
+ *
+ * You can configure it by specifying `cellEditorParams` in the colDef:
+ *
+ * colDef {
+ *   field: 'stars',
+ *   type: 'abColDefNumber',
+ *   cellEditorParams: {
+ *     emptyValue: 5, // defaults to ''
+ *     showClearButton: false
+ *   }
+ * }
+ *
+ * For now, there are 2 editor params you can configure:
+ *
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
+ * cellEditorParams.emptyValue - defaults to `''` (empty string) - value to set for the cell, when the clear button is pressed.
+ *
+ * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
+ */
+export declare class AdaptablePercentageEditor implements ICellEditorComp {
+    private value;
+    private columnId;
+    private el;
+    private params;
+    private editor;
+    private valueParser;
+    private unmountReactRoot?;
+    init(params: AdaptablePercentageCellEditorParams): void;
+    getGui(): HTMLDivElement;
+    getValue(): any;
+    focusIn(): void;
+    focusOut(): void;
+    afterGuiAttached(): void;
+    destroy(): void;
+    private onValueChange;
+}

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
+import { InternalAdaptablePercentageEditor, } from './InternalAdaptablePercentageEditor';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { getStartValue } from '../AdaptableNumberEditor';
+import { times100 } from '../../../Utilities/times100';
+import { divideBy100 } from '../../../Utilities/divideBy100';
+const defaultValueParser = ({ newValue, oldValue: _ }) => {
+    return newValue;
+};
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+export const AdaptableReactPercentageEditor = forwardRef((props, ref) => {
+    var _a, _b;
+    const [initialValue] = useState(() => times100(getStartValue(props)));
+    const valueRef = useRef(initialValue);
+    const columnId = props.column.getColId();
+    const adaptable = props.context.__adaptable;
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
+    function onValueChange(value) {
+        var _a;
+        const newValue = valueParser
+            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            : value;
+        valueRef.current = newValue;
+        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, divideBy100(newValue));
+    }
+    const editorRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return divideBy100(valueRef.current);
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    function onKeyDown(keyDownEvent) {
+        adaptable._emit('CellEditorKeyDown', {
+            keyDownEvent,
+            cellValue: valueRef.current,
+            columnId,
+            updateValueCallback: (updatedValue) => {
+                editorRef.current.setValue(updatedValue);
+            },
+        });
+    }
+    return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, renderWithAdaptableContext(editorElement, adaptable)));
+});
+AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEditor';
+/**
+ * Used by default for all `abColDefNumber` columns.
+ *
+ * You can configure it by specifying `cellEditorParams` in the colDef:
+ *
+ * colDef {
+ *   field: 'stars',
+ *   type: 'abColDefNumber',
+ *   cellEditorParams: {
+ *     emptyValue: 5, // defaults to ''
+ *     showClearButton: false
+ *   }
+ * }
+ *
+ * For now, there are 2 editor params you can configure:
+ *
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
+ * cellEditorParams.emptyValue - defaults to `''` (empty string) - value to set for the cell, when the clear button is pressed.
+ *
+ * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
+ */
+export class AdaptablePercentageEditor {
+    constructor() {
+        this.valueParser = defaultValueParser;
+        this.onValueChange = (value) => {
+            const newValue = this.valueParser
+                ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
+                : value;
+            this.value = divideBy100(newValue);
+        };
+    }
+    init(params) {
+        this.value = getStartValue(params);
+        this.params = params;
+        this.columnId = params.column.getColId();
+        const { valueParser } = params.column.getColDef();
+        if (typeof valueParser === 'function') {
+            this.valueParser = valueParser;
+        }
+        this.el = document.createElement('div');
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
+    }
+    /* Component Editor Lifecycle methods */
+    // gets called once when grid ready to insert the element
+    getGui() {
+        return this.el;
+    }
+    // the final value to send to the grid, on completion of editing
+    getValue() {
+        return this.value;
+    }
+    focusIn() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    focusOut() { }
+    // after this component has been created and inserted into the grid
+    afterGuiAttached() {
+        var _a, _b;
+        const adaptable = this.params.context.__adaptable;
+        const defaultValue = times100(this.value);
+        const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
+                this.editor = editor;
+                editor === null || editor === void 0 ? void 0 : editor.focus();
+            } }));
+        this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(editorElement, adaptable), this.el);
+        this.getGui().addEventListener('keydown', (keyDownEvent) => {
+            adaptable._emit('CellEditorKeyDown', {
+                keyDownEvent,
+                cellValue: this.value,
+                columnId: this.columnId,
+                updateValueCallback: (updatedValue) => {
+                    this.editor.setValue(updatedValue);
+                },
+            });
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}

package/src/agGrid/weightedAverage.js

@@ -1,4 +1,5 @@
 import toNumber from 'lodash/toNumber';
+import { _agGridApi_getValue } from './AgGridAdapter';
 export const getNumericValue = (input) => {
     if (typeof input === 'number') {
         return input;
@@ -13,9 +14,9 @@ export const weightedAverage = (params, columnId, weightColumnId) => {
     // TODO AFL: improve performance by using the intermediary aggregated values (for nested groups)
     groupRowNode.allLeafChildren.forEach((rowNode) => {
         // when editing values might be converted to strings
-        const rawColumnValue = gridApi.getValue(columnId, rowNode);
+        const rawColumnValue = _agGridApi_getValue(columnId, rowNode, gridApi);
         const columnValue = getNumericValue(rawColumnValue);
-        const rawWeightedColumnValue = gridApi.getValue(weightColumnId, rowNode);
+        const rawWeightedColumnValue = _agGridApi_getValue(weightColumnId, rowNode, gridApi);
         const weightedColumnValue = getNumericValue(rawWeightedColumnValue);
         if (weightedColumnValue !== null) {
             weightedColumnValueSum += weightedColumnValue;

package/src/components/Accordion.js

@@ -26,7 +26,7 @@ export const Accordion = ({ title, children }) => {
         setIsOpen(!isOpen);
     };
     return (React.createElement(Panel, { className: "ab-Accordion" },
-        React.createElement(SimpleButton, { iconPosition: 'end', icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
+        React.createElement(SimpleButton, { iconPosition: "end", icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
         React.createElement("div", { ref: content, style: {
                 maxHeight: `${height}`,
                 overflow: 'hidden',

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -2,10 +2,8 @@ import * as React from 'react';
 export declare const DatepickerContext: React.Context<{
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
-    showClearButton?: boolean;
 }>;
 export declare const useDatepickerContext: () => {
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
-    showClearButton?: boolean;
 };

package/src/components/Datepicker/index.js

@@ -34,9 +34,8 @@ const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
 };
 export const Datepicker = React.forwardRef((props, ref) => {
     var _a;
-    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, showClearButton: showClearButtonFromProps, datepickerButtons } = props, boxProps = __rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "showClearButton", "datepickerButtons"]);
+    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons } = props, boxProps = __rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "datepickerButtons"]);
     const datepickerContext = useDatepickerContext();
-    const showClearButton = (showClearButtonFromProps !== null && showClearButtonFromProps !== void 0 ? showClearButtonFromProps : datepickerContext.showClearButton) === false ? false : true;
     let [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: props.onChange,
     });
@@ -79,10 +78,10 @@ export const Datepicker = React.forwardRef((props, ref) => {
         '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = showClearButton ? (React.createElement(SimpleButton, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = (React.createElement(SimpleButton, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
-        }, accessLevel: 'Full' })) : null;
+        }, accessLevel: 'Full' }));
     const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(Flex, null,
         React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AdaptableColumnDataType } from '../../types';
+export declare const DataTableEditor: ({ fields, dataFormatter, data: initialData, type, labels, }: {
+    fields: {
+        label: string;
+        value: string;
+        dataType: AdaptableColumnDataType;
+        readOnly?: boolean;
+    }[];
+    type: string;
+    dataFormatter: (field: string) => string;
+    data: any;
+    labels?: {
+        showIds?: string;
+        filterPlaceholder?: string;
+    };
+}) => JSX.Element;

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { baseClassName } from '.';
+import { CheckBox } from '../CheckBox';
+import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
+import FormLayout, { FormRow } from '../FormLayout';
+import EditorButton from './EditorButton';
+import Input from '../Input';
+import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
+import { useAdaptable } from '../../View/AdaptableContext';
+import AdaptableInput from '../../View/Components/AdaptableInput';
+export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
+    var _a, _b;
+    const adaptable = useAdaptable();
+    const [data, setData] = React.useState(initialData);
+    const [showColumnIds, setShowValues] = React.useState(false);
+    const [searchInputValue, setSearchInputValue] = React.useState('');
+    const getColValue = (fieldValue) => {
+        return adaptable.api.internalApi.getValueUsingField(data, fieldValue);
+    };
+    const updateColValue = (rowData, fielValue, newValue) => {
+        const updatedRowData = adaptable.api.internalApi.setValueUsingField(rowData, fielValue, newValue);
+        return Object.assign({}, updatedRowData);
+    };
+    const getColDateValue = (fieldValue) => {
+        const colValue = getColValue(fieldValue);
+        return colValue && isValueValidDate(colValue)
+            ? new Date(colValue).toISOString().substr(0, 10)
+            : '';
+    };
+    const hasFriendlyNames = React.useMemo(() => {
+        return fields.some((field) => field.label !== field.value);
+    }, []);
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
+        React.createElement(Flex, { className: `${baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
+            hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
+                    float: 'right',
+                    margin: 0,
+                    paddingTop: 'var(--ab-space-1)',
+                    paddingBottom: 'var(--ab-space-1)',
+                } }, (_a = labels === null || labels === void 0 ? void 0 : labels.showIds) !== null && _a !== void 0 ? _a : 'Show Column IDs')),
+            React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: (_b = labels === null || labels === void 0 ? void 0 : labels.filterPlaceholder) !== null && _b !== void 0 ? _b : 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
+        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
+            .filter((field) => {
+            var _a, _b;
+            if (!searchInputValue) {
+                return true;
+            }
+            return (field.label.includes(searchInputValue) || ((_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, searchInputValue)));
+        })
+            .map((field) => {
+            var _a, _b, _c;
+            const label = showColumnIds ? `[${field.value}]` : field.label;
+            return (React.createElement(FormRow, { key: field.label, label: React.createElement(EditorButton, { width: "100%", height: "100%", style: {
+                        background: 'var(--ab-color-primary)',
+                        cursor: 'grab',
+                        marginRight: 'var(--ab-space-1)',
+                    }, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
+                    React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'Number' ? (React.createElement(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: (_a = getColValue(field.value)) !== null && _a !== void 0 ? _a : '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'String' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: (_b = getColValue(field.value)) !== null && _b !== void 0 ? _b : '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'Date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: (_c = getColDateValue(field.value)) !== null && _c !== void 0 ? _c : '', onChange: (e) => {
+                    setData(updateColValue(data, field.value, new Date(e.target.value)));
+                }, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
+        }))));
+};

package/src/components/ExpressionEditor/EditorInput.js

@@ -5,7 +5,7 @@ import { editorButtonsSearch } from './editorButtonsSearch';
 import { useExpressionEditor } from './EditorContext';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { editorButtonsAggregatedScalar } from './editorButtonsAggregatedScalar';
-import { aggregatedExpressionFunctions, cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
+import { cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
 import { editorButtonsCumulativeAggregatedScalar } from './editorButtonsCumulativeAggregatedScalar';
 import { editorButtonsQuantileAggregatedScalar } from './editorButtonsQuantileAggregatedScalar';
 function EditorInput(props) {
@@ -13,14 +13,27 @@ function EditorInput(props) {
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
-        const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
-            ? cumulativeAggregatedExpressionFunctions
-            : type === 'quantileAggregatedScalar'
-                ? quantileAggregatedExpressionFunctions
-                : aggregatedExpressionFunctions;
-        return Object.keys(availableAggregatedExpressionFunctions)
-            .filter((key) => sourceExpressionFunctions.includes(key))
-            .reduce((obj, key) => {
+        let filteredCollection = [];
+        if (type === 'aggregatedScalar') {
+            const excludeSet = new Set([
+                // we cannot have a hardcodede set of functions,
+                // we need to allow custom expresions
+                ...cumulativeAggregatedExpressionFunctions,
+                ...quantileAggregatedExpressionFunctions,
+            ]);
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => 
+            //  need to allow standard ones
+            cumulativeAggregatedExpressionFunctions.includes(key) ||
+                // and anything else that is not cumul or quantile
+                !excludeSet.has(key));
+        }
+        else {
+            const includeExpressionFunctions = type === 'cumulativeAggregatedScalar'
+                ? cumulativeAggregatedExpressionFunctions
+                : quantileAggregatedExpressionFunctions;
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => includeExpressionFunctions.includes(key));
+        }
+        return filteredCollection.reduce((obj, key) => {
             obj[key] = availableAggregatedExpressionFunctions[key];
             return obj;
         }, {});

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NamedQuery } from '../../types';
+export declare const NamedQueryEditor: (props: {
+    namedQueries: NamedQuery[];
+}) => JSX.Element;

package/src/components/ExpressionEditor/NamedQueryEditor.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { useAdaptable } from '../../View/AdaptableContext';
+import { CheckBox } from '../CheckBox';
+import EditorButton from './EditorButton';
+export const NamedQueryEditor = (props) => {
+    const adaptable = useAdaptable();
+    const [showColumnIds, setShowColumnIds] = React.useState(false);
+    const [inlineQuery, setInlineQuery] = React.useState(false);
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
+        React.createElement(CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
+        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+                padding: 3,
+                marginTop: 'var(--ab-space-2)',
+                marginBottom: 'var(--ab-space-2)',
+                width: '100%',
+            }, backgroundColor: "primarylight" },
+            ' ',
+            React.createElement(EditorButton, { width: "100%", height: "100%", style: {
+                    background: 'var(--ab-color-primary)',
+                    cursor: 'grab',
+                }, data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
+                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
+            React.createElement(Flex, { alignItems: "start", style: {
+                    padding: 5,
+                } }, showColumnIds
+                ? namedQuery.BooleanExpression
+                : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
+};

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

@@ -7,10 +7,20 @@ interface QueryBuilderProps {
         value: string;
         type: AdaptableColumnDataType;
     }[];
+    getFields: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
     onChange: (query: string) => void;
     module: AdaptableModule;
 }
 export declare function useQueryBuilderContext(): {
+    getColumns: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
     getFields: (type?: AdaptableColumnDataType) => {
         label?: string;
         value: string;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -54,7 +54,8 @@ export const QueryBuilder = (props) => {
     }, []);
     const context = React.useMemo(() => {
         return {
-            getFields: props.getColumns,
+            getColumns: props.getColumns,
+            getFields: props.getFields,
             getExpressions: (columnType) => {
                 return booleanExpressions
                     ? getFunctionsForColumnType(columnType, Object.keys(booleanExpressions))
@@ -66,10 +67,12 @@ export const QueryBuilder = (props) => {
     const clearExpressionButton = (React.createElement(SimpleButton, { onClick: () => {
             clearExpression();
         } }, "Clear Expression"));
-    const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate);
+    const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate, {
+        supportedFields: props.getFields(),
+    });
     let errorOrEditor = null;
     if (qlPredicate && 'errorMessage' in qlPredicate) {
-        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox, null,
+        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox, { "data-name": "unsupported-query-warning" },
             React.createElement(Flex, { alignItems: "center" },
                 "Named Queries are not supported in the Query Builder",
                 React.createElement(Box, { flex: 1 }),
@@ -80,7 +83,7 @@ export const QueryBuilder = (props) => {
                 clearExpressionButton)));
     }
     else if (unsupportedExpressionFunction) {
-        errorOrEditor = React.createElement(WarningBox, null, unsupportedExpressionFunction);
+        errorOrEditor = (React.createElement(WarningBox, { "data-name": "unsupported-expression-warning" }, unsupportedExpressionFunction));
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
         errorOrEditor = (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.d.ts

@@ -2,10 +2,11 @@
 import { QlLogicalOperator } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumn, AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
-export declare const PrimitiveColumnSelector: (props: {
-    columnId: string;
+export declare const PrimitiveColumnOrFieldSelector: (props: {
+    fieldOrColumn: string;
     type?: AdaptableColumnDataType;
     onChange: (colId: string) => void;
+    hideFields?: boolean;
 }) => JSX.Element;
 export declare const PrimiteValueInput: (props: {
     inputType: ExpressionFunctionInputType;