@adaptabletools/adaptable 12.1.5 → 12.1.8-canary.0

package/src/agGrid/weightedAverage.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.weightedAverage = void 0;
+const tslib_1 = require("tslib");
+const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
+const weightedAverage = (params, columnId, weightColumnId) => {
+    let weightedColumnValueSum = 0;
+    let columnValueSum = 0;
+    params.values.forEach((value) => {
+        if (!value) {
+            return;
+        }
+        // when editing values become string
+        const rawColumnValue = value[columnId];
+        if (typeof rawColumnValue === 'object') {
+            return;
+        }
+        const columnValue = StringExtensions_1.default.IsNotNullOrEmpty(rawColumnValue)
+            ? Number(value[columnId])
+            : null;
+        const rawWeightedColumnValue = value[weightColumnId];
+        if (typeof rawWeightedColumnValue === 'object') {
+            return;
+        }
+        const weightedColumnValue = StringExtensions_1.default.IsNotNullOrEmpty(rawWeightedColumnValue)
+            ? Number(value[weightColumnId])
+            : null;
+        if (params.rowNode.leafGroup) {
+            if (weightedColumnValue !== null) {
+                weightedColumnValueSum += weightedColumnValue;
+            }
+            if (columnValue !== null && weightedColumnValue !== null) {
+                columnValueSum += weightedColumnValue * columnValue;
+            }
+        }
+        else {
+            if (weightedColumnValue !== null) {
+                weightedColumnValueSum += weightedColumnValue;
+            }
+            if (columnValue !== null) {
+                columnValueSum += columnValue;
+            }
+        }
+    });
+    return {
+        toString: () => {
+            const rez = columnValueSum / weightedColumnValueSum;
+            // 0 / 0 = NaN
+            if (isNaN(rez)) {
+                return '';
+            }
+            return rez;
+        },
+        valueOf: () => {
+            const rez = columnValueSum / weightedColumnValueSum;
+            // 0 / 0 = NaN
+            if (isNaN(rez)) {
+                return 0;
+            }
+            return rez;
+        },
+        [columnId]: columnValueSum,
+        [weightColumnId]: weightedColumnValueSum,
+    };
+};
+exports.weightedAverage = weightedAverage;

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

@@ -2,6 +2,7 @@ import { ExpressionFunction, ExpressionFunctionMap } from '../../parser/src/type
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { CSSProperties } from 'react';
 interface BaseEditorInputProps {
+    type: 'main' | 'secondary';
     value: string;
     onChange: (value: string) => void;
     disabled?: boolean;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -19,7 +19,7 @@ const DocumentationLinkConstants_1 = require("../../Utilities/Constants/Document
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const icons_1 = require("../icons");
 function BaseEditorInput(props) {
-    const { expressionFunctions, testData, style } = props;
+    const { expressionFunctions, testData, style, type } = props;
     const { ref: textAreaRefCallback, selectionStart, selectionEnd } = useSelectionRange_1.useSelectionRange();
     const cursor = selectionStart === selectionEnd ? selectionStart : null;
     let result;
@@ -87,7 +87,6 @@ function BaseEditorInput(props) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
     }, [selectedFunctionName]);
-    const [functionsDropdownExpanded, setFunctionsDropdownExpanded] = react_1.useState(false);
     const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, style: {
                 fontSize: 'var(--ab-font-size-2)',
                 border: '1px solid var(--ab-color-primarydark)',
@@ -124,7 +123,7 @@ function BaseEditorInput(props) {
                         background: 'var(--ab-color-action-add)',
                         marginRight: 5,
                     }, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(Textarea_1.default, { ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: "ab-ExpressionEditor__textarea", autoFocus: true, spellCheck: "false", onChange: (event) => {
+        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: "ab-ExpressionEditor__textarea", autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
             }, style: Object.assign({ width: '100%', minHeight: 100, fontFamily: 'monospace', resize: 'vertical', fontSize: '1rem', padding: 'var(--ab-space-2)' }, style) }),
         props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },

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';
+    type: 'boolean' | 'scalar' | 'aggregatedScalar' | 'cumulativeAggregatedScalar';
     module: AdaptableModule;
     value: string;
     onChange: (value: string) => void;

package/src/components/ExpressionEditor/EditorInput.js

@@ -7,15 +7,35 @@ 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");
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
         .getModuleExpressionFunctions(props.module);
-    const expressionFunctions = props.type === 'aggregatedScalar'
-        ? moduleExpressionFunctions.aggregatedScalarFunctions
-        : Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
+    const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
+        const sourceExpressionFunctions = type === 'aggregatedScalar'
+            ? aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions
+            : aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions;
+        return Object.keys(availableAggregatedExpressionFunctions)
+            .filter((key) => sourceExpressionFunctions.includes(key))
+            .reduce((obj, key) => {
+            obj[key] = availableAggregatedExpressionFunctions[key];
+            return obj;
+        }, {});
+    };
+    const expressionFunctions = react_1.useMemo(() => {
+        return props.type === 'aggregatedScalar' || props.type === 'cumulativeAggregatedScalar'
+            ? getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type)
+            : Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
+    }, [props.type]);
     const { setSelectedFunction } = EditorContext_1.useExpressionEditor();
     const queryName = `${StringExtensions_1.default.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar' ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar', api: props.api }));
+    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+            ? 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 }));
 }
 exports.default = EditorInput;

package/src/components/ExpressionEditor/{EditorInputReactive.d.ts → EditorInputWithWhereClause.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
-interface EditorInputReactiveProps {
+interface EditorInputWithWhereClauseProps {
     type: 'observable' | 'aggregatedBoolean';
     module: AdaptableModule;
     value: string;
@@ -10,5 +10,5 @@ interface EditorInputReactiveProps {
     isFullExpression?: boolean;
     api: AdaptableApi;
 }
-declare function EditorInputReactive(props: EditorInputReactiveProps): JSX.Element;
-export default EditorInputReactive;
+declare function EditorInputWithWhereClause(props: EditorInputWithWhereClauseProps): JSX.Element;
+export default EditorInputWithWhereClause;

package/src/components/ExpressionEditor/{EditorInputReactive.js → EditorInputWithWhereClause.js}

@@ -8,10 +8,11 @@ const rebass_1 = require("rebass");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const editorButtonsReactive_1 = require("./editorButtonsReactive");
+const editorButtonsObservable_1 = require("./editorButtonsObservable");
 const CheckBox_1 = require("../CheckBox");
 const EditorContext_1 = require("./EditorContext");
-function EditorInputReactive(props) {
+const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoolean");
+function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
         .getModuleExpressionFunctions(props.module);
@@ -45,7 +46,7 @@ function EditorInputReactive(props) {
     const [showWhereClause, setShowWhereClause] = react_1.useState(StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace(whereClauseValue));
     const queryName = `${StringExtensions_1.CapitaliseFirstLetter(props.type)}Query`;
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" },
-        React.createElement(BaseEditorInput_1.BaseEditorInput, { value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: editorButtonsReactive_1.editorButtonsReactive, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
+        React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable_1.editorButtonsObservable : editorButtonsAggregatedBoolean_1.editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
         React.createElement(CheckBox_1.CheckBox, { disabled: StringExtensions_1.IsNullOrEmptyOrWhiteSpace(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
                 setShowWhereClause(checked);
                 if (!checked) {
@@ -53,6 +54,6 @@ function EditorInputReactive(props) {
                     updateWhereClauseValue(null);
                 }
             }, pl: 3 }, "WHERE"),
-        showWhereClause && (React.createElement(BaseEditorInput_1.BaseEditorInput, { disabled: StringExtensions_1.IsNullOrEmptyOrWhiteSpace(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
+        showWhereClause && (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'secondary', disabled: StringExtensions_1.IsNullOrEmptyOrWhiteSpace(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
 }
-exports.default = EditorInputReactive;
+exports.default = EditorInputWithWhereClause;

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

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

package/src/components/ExpressionEditor/{editorButtonsReactive.js → editorButtonsAggregatedBoolean.js}

@@ -1,12 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsReactive = void 0;
-exports.editorButtonsReactive = [
+exports.editorButtonsAggregatedBoolean = void 0;
+exports.editorButtonsAggregatedBoolean = [
     {
         functionName: 'SUM',
         data: 'SUM()',
         text: 'Sum',
     },
+    {
+        functionName: 'MIN',
+        data: 'MIN()',
+        text: 'Min',
+    },
+    {
+        functionName: 'MAX',
+        data: 'MAX()',
+        text: 'Max',
+    },
+    {
+        functionName: 'AVG',
+        data: 'AVG()',
+        text: 'Average',
+    },
+    {
+        functionName: 'GROUP_BY',
+        data: 'GROUP_BY()',
+        text: 'GroupBy',
+    },
     {
         functionName: 'EQ',
         data: '=',
@@ -37,39 +57,4 @@ exports.editorButtonsReactive = [
         data: '>=',
         icon: 'greater-than-or-equal',
     },
-    {
-        functionName: 'ROW_CHANGE',
-        data: 'ROW_CHANGE()',
-        text: 'RowChange',
-    },
-    {
-        functionName: 'GRID_CHANGE',
-        data: 'GRID_CHANGE()',
-        text: 'GridChange',
-    },
-    {
-        functionName: 'COUNT',
-        data: 'COUNT()',
-        text: 'Count',
-    },
-    {
-        functionName: 'NONE',
-        data: 'NONE()',
-        text: 'None',
-    },
-    {
-        functionName: 'MIN',
-        data: 'MIN()',
-        text: 'Min',
-    },
-    {
-        functionName: 'MAX',
-        data: 'MAX()',
-        text: 'Max',
-    },
-    {
-        functionName: 'TIMEFRAME',
-        data: 'TIMEFRAME()',
-        text: 'Timeframe',
-    },
 ];

package/src/components/ExpressionEditor/editorButtonsAggregatedScalar.js

@@ -32,19 +32,14 @@ exports.editorButtonsAggregatedScalar = [
         data: 'QUANT()',
         text: 'Quantile',
     },
+    {
+        functionName: 'WEIGHT',
+        data: 'WEIGHT()',
+        text: 'Weight',
+    },
     {
         functionName: 'GROUP_BY',
         data: 'GROUP_BY()',
         text: 'GroupBy',
     },
-    {
-        functionName: 'CUMUL',
-        data: 'CUMUL()',
-        text: 'Cumulate',
-    },
-    {
-        functionName: 'OVER',
-        data: 'OVER()',
-        text: 'Over',
-    },
 ];

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

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

package/src/components/ExpressionEditor/editorButtonsCumulativeAggregatedScalar.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editorButtonsCumulativeAggregatedScalar = void 0;
+exports.editorButtonsCumulativeAggregatedScalar = [
+    {
+        functionName: 'CUMUL',
+        data: 'CUMUL()',
+        text: 'Cumulate',
+    },
+    {
+        functionName: 'SUM',
+        data: 'SUM()',
+        text: 'Sum',
+    },
+    {
+        functionName: 'PERCENTAGE',
+        data: 'PERCENTAGE()',
+        text: 'Percentage',
+    },
+    {
+        functionName: 'AVG',
+        data: 'AVG()',
+        text: 'Average',
+    },
+    {
+        functionName: 'MIN',
+        data: 'MIN()',
+        text: 'Min',
+    },
+    {
+        functionName: 'MAX',
+        data: 'MAX()',
+        text: 'Max',
+    },
+    {
+        functionName: 'OVER',
+        data: 'OVER()',
+        text: 'Over',
+    },
+    {
+        functionName: 'WEIGHT',
+        data: 'WEIGHT()',
+        text: 'Weight',
+    },
+    {
+        functionName: 'GROUP_BY',
+        data: 'GROUP_BY()',
+        text: 'GroupBy',
+    },
+];

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

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

package/src/components/ExpressionEditor/editorButtonsObservable.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editorButtonsObservable = void 0;
+exports.editorButtonsObservable = [
+    {
+        functionName: 'ROW_CHANGE',
+        data: 'ROW_CHANGE()',
+        text: 'RowChange',
+    },
+    {
+        functionName: 'GRID_CHANGE',
+        data: 'GRID_CHANGE()',
+        text: 'GridChange',
+    },
+    {
+        functionName: 'COUNT',
+        data: 'COUNT()',
+        text: 'Count',
+    },
+    {
+        functionName: 'NONE',
+        data: 'NONE()',
+        text: 'None',
+    },
+    {
+        functionName: 'MIN',
+        data: 'MIN()',
+        text: 'Min',
+    },
+    {
+        functionName: 'MAX',
+        data: 'MAX()',
+        text: 'Max',
+    },
+    {
+        functionName: 'TIMEFRAME',
+        data: 'TIMEFRAME()',
+        text: 'Timeframe',
+    },
+];

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi, AdaptableColumn, AdaptableModule } from '../../types';
 import { NamedQuery } from '../../PredefinedConfig/QueryState';
-declare type ExpressionEditorType = 'boolean' | 'scalar' | 'observable' | 'aggregatedBoolean' | 'aggregatedScalar';
+declare type ExpressionEditorType = 'boolean' | 'scalar' | 'observable' | 'aggregatedBoolean' | 'aggregatedScalar' | 'cumulativeAggregatedScalar';
 interface ExpressionEditorProps {
     value: string;
     onChange: (value: string) => void;

package/src/components/ExpressionEditor/index.js

@@ -13,7 +13,7 @@ const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
 const Radio_1 = tslib_1.__importDefault(require("../Radio"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const EditorInputReactive_1 = tslib_1.__importDefault(require("./EditorInputReactive"));
+const EditorInputWithWhereClause_1 = tslib_1.__importDefault(require("./EditorInputWithWhereClause"));
 const EditorInput_1 = tslib_1.__importDefault(require("./EditorInput"));
 const EditorContext_1 = require("./EditorContext");
 const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumentation");
@@ -24,6 +24,7 @@ const CodeBlock_1 = require("../CodeBlock");
 const NamedQueryContext_1 = require("./NamedQueryContext");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
+const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
 function ExpressionEditor(props) {
     var _a;
     const { type, module } = props;
@@ -35,11 +36,11 @@ function ExpressionEditor(props) {
     const { namedQuery, setNamedQuery } = NamedQueryContext_1.useNamedQueryContext();
     const textAreaRef = react_1.useRef(null);
     const allowSaveNamedQuery = (_a = props.allowSaveNamedQuery) !== null && _a !== void 0 ? _a : type === 'boolean';
-    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputReactive_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
+    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
         }, testData: data, api: props.api })) : (
-    // 'boolean','scalar' or 'aggregatedScalar'
+    // 'boolean','scalar' or 'aggregatedScalar'/'cumulativeAggregatedScalar'
     React.createElement(EditorInput_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
@@ -99,6 +100,7 @@ function ExpressionEditor(props) {
             ? new Date(colValue).toISOString().substr(0, 10)
             : '';
     };
+    const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
             React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
@@ -106,8 +108,17 @@ function ExpressionEditor(props) {
                     margin: 0,
                     paddingTop: 'var(--ab-space-1)',
                     paddingBottom: 'var(--ab-space-1)',
-                } }, 'Show Column IDs')),
-        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '100px'], style: { alignItems: 'stretch' } }, queryableColumns.map((column) => (React.createElement(FormLayout_1.FormRow, { key: column.columnId, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
+                } }, 'Show Column IDs'),
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Filter columns...", style: { flex: 1, marginBottom: 3 } })),
+        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '100px'], style: { alignItems: 'stretch' } }, queryableColumns
+            .filter((column) => {
+            if (!searchInputValue) {
+                return true;
+            }
+            return (column.columnId.includes(searchInputValue) ||
+                column.friendlyName.includes(searchInputValue));
+        })
+            .map((column) => (React.createElement(FormLayout_1.FormRow, { key: column.columnId, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
                     background: 'var(--ab-color-primary)',
                     cursor: 'grab',
                     marginRight: 'var(--ab-space-1)',
@@ -219,6 +230,15 @@ const renderQueryHints = (type) => {
         examples.push({
             code: 'AVG([stargazers_count], GROUP_BY([language]))',
             description: 'Average popularity (number of stars) of all the Github repositories, grouped by programming language',
+        }, {
+            code: 'MAX([PnL]), GROUP_BY([currency], [country])',
+            description: "The maximum 'PnL' value, grouped by currency and country",
+        });
+    }
+    if (type === 'cumulativeAggregatedScalar') {
+        examples.push({
+            code: 'CUMUL(AVG([stargazers_count], GROUP_BY([language])), OVER([TradeDate]))',
+            description: "The cumulative average popularity (number of stars) of all the Github repositories, grouped by programming language in the order given by the 'TradeDate' column",
         }, {
             code: 'CUMUL( SUM([PnL]), OVER([TradeDate]))',
             description: "The cumulative sum of all 'PnL' columns in the order given by the 'TradeDate' column",
@@ -247,4 +267,5 @@ const queryDocumentationLinks = {
     observable: DocumentationLinkConstants_1.ObservableQueryDocsLink,
     aggregatedBoolean: DocumentationLinkConstants_1.AggregatedBooleanQueryDocsLink,
     aggregatedScalar: DocumentationLinkConstants_1.AggregatedScalarQueryDocsLink,
+    cumulativeAggregatedScalar: DocumentationLinkConstants_1.CumulativeAggregatedScalarQueryDocsLink,
 };

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -17,31 +17,29 @@ const ProgressIndicator = () => {
         width: 0,
     });
     const adaptable = AdaptableContext_1.useAdaptable();
-    const adaptableContainerRef = react_1.useRef(adaptable.getAdaptableContainerElement());
-    const gridContainerRef = react_1.useRef(adaptable.getAgGridContainerElement());
-    const disableAdaptableGrid = (elemRef, disabled) => {
+    const disableAdaptableGrid = (containerElement, disabled) => {
         const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
-        if (!elemRef.current) {
+        if (!containerElement) {
             return;
         }
         if (disabled) {
-            elemRef.current.classList.add(DISABLING_CSS_CLASS);
+            containerElement.classList.add(DISABLING_CSS_CLASS);
         }
         else {
-            elemRef.current.classList.remove(DISABLING_CSS_CLASS);
+            containerElement.classList.remove(DISABLING_CSS_CLASS);
         }
     };
-    const updateGridContainerCoordinates = () => {
-        if (!gridContainerRef.current) {
+    const updateGridContainerCoordinates = (containerElement) => {
+        if (!containerElement) {
             return;
         }
-        const { top, left, height, width } = gridContainerRef.current.getBoundingClientRect();
+        const { top, left, height, width } = containerElement.getBoundingClientRect();
         setProgressIndicatorCoordinates({ top, left, height, width });
     };
     react_1.useEffect(() => {
-        disableAdaptableGrid(adaptableContainerRef, active);
-        disableAdaptableGrid(gridContainerRef, active);
-        updateGridContainerCoordinates();
+        disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
+        disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
+        updateGridContainerCoordinates(adaptable.getAdaptableContainerElement());
         // without RAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
         requestAnimationFrame(() => {
             setVisible(active);