@adaptabletools/adaptable 11.2.2 → 11.2.4

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -18,10 +18,19 @@ const differenceInMonths_1 = tslib_1.__importDefault(require("date-fns/differenc
 const differenceInYears_1 = tslib_1.__importDefault(require("date-fns/differenceInYears"));
 const expressionFunctionUtils_1 = require("./expressionFunctionUtils");
 const dateUtils_1 = require("./dateUtils");
+const sanitizeArguments = (values, allowNaN) => {
+    return values.filter((value) => value != undefined && value != null && value !== '' && (allowNaN || !isNaN(value)));
+};
+const sanitizeNumericResult = (value) => {
+    if (isNaN(value)) {
+        return '';
+    }
+    return value;
+};
 exports.scalarExpressionFunctions = {
     ADD: {
         handler(args) {
-            return args.reduce((a, b) => a + b);
+            return sanitizeArguments(args, true).reduce((a, b) => a + b);
         },
         isHiddenFromMenu: true,
         description: 'Returns the sum of 2 numbers',
@@ -30,7 +39,7 @@ exports.scalarExpressionFunctions = {
     },
     SUB: {
         handler(args) {
-            return args.reduce((a, b) => a - b);
+            return sanitizeArguments(args).reduce((a, b) => a - b);
         },
         isHiddenFromMenu: true,
         description: 'Returns the difference of 2 numbers',
@@ -39,7 +48,7 @@ exports.scalarExpressionFunctions = {
     },
     MUL: {
         handler(args) {
-            return args.reduce((a, b) => a * b);
+            return sanitizeNumericResult(args.reduce((a, b) => a * b));
         },
         isHiddenFromMenu: true,
         description: 'Returns the product of 2 numbers',
@@ -48,7 +57,7 @@ exports.scalarExpressionFunctions = {
     },
     DIV: {
         handler(args) {
-            return args.reduce((a, b) => a / b);
+            return sanitizeNumericResult(args.reduce((a, b) => a / b));
         },
         isHiddenFromMenu: true,
         description: 'Returns the division of 2 numbers',
@@ -57,7 +66,7 @@ exports.scalarExpressionFunctions = {
     },
     MOD: {
         handler(args) {
-            return args[0] % args[1];
+            return sanitizeNumericResult(args[0] % args[1]);
         },
         isHiddenFromMenu: true,
         description: 'Returns the modulo of 2 numbers',
@@ -66,7 +75,7 @@ exports.scalarExpressionFunctions = {
     },
     POW: {
         handler(args) {
-            return Math.pow(args[0], args[1]);
+            return sanitizeNumericResult(Math.pow(args[0], args[1]));
         },
         isHiddenFromMenu: true,
         description: 'Returns the pow of 2 numbers',
@@ -101,7 +110,7 @@ exports.scalarExpressionFunctions = {
     },
     MIN: {
         handler(args) {
-            return Math.min(...args);
+            return Math.min(...sanitizeArguments(args));
         },
         description: 'Returns the smallest of inputted numbers',
         signatures: ['MIN(number, number, ...number)'],
@@ -109,7 +118,7 @@ exports.scalarExpressionFunctions = {
     },
     MAX: {
         handler(args) {
-            return Math.max(...args);
+            return Math.max(...sanitizeArguments(args));
         },
         description: 'Returns the highest of inputted numbers',
         signatures: ['MAX(number, number, ...number)'],
@@ -117,9 +126,10 @@ exports.scalarExpressionFunctions = {
     },
     AVG: {
         handler(args) {
-            if (args.length === 0)
+            if (args.length === 0) {
                 return 0;
-            return args.reduce((a, b) => a + b) / args.length;
+            }
+            return sanitizeArguments(args).reduce((a, b) => a + b) / args.length;
         },
         description: 'Returns the average of inputted numbers',
         signatures: ['AVG(number, number, ...number)'],
@@ -222,7 +232,7 @@ exports.scalarExpressionFunctions = {
         handler(args) {
             const [first, second] = dateUtils_1.normalizeDateParams(args);
             const result = differenceInDays_1.default(first, second);
-            return isNaN(result) ? '' : result;
+            return sanitizeNumericResult(result);
         },
         description: 'Returns the difference in days between 2 dates',
         signatures: ['DIFF_DAYS(a: date, b: date)'],
@@ -232,7 +242,7 @@ exports.scalarExpressionFunctions = {
         handler(args) {
             const [first, second] = dateUtils_1.normalizeDateParams(args);
             const result = differenceInWeeks_1.default(first, second);
-            return isNaN(result) ? '' : result;
+            return sanitizeNumericResult(result);
         },
         description: 'Returns the difference in weeks between 2 dates',
         signatures: ['DIFF_WEEKS(a: date, b: date)'],
@@ -242,7 +252,7 @@ exports.scalarExpressionFunctions = {
         handler(args) {
             const [first, second] = dateUtils_1.normalizeDateParams(args);
             const result = differenceInMonths_1.default(first, second);
-            return isNaN(result) ? '' : result;
+            return sanitizeNumericResult(result);
         },
         description: 'Returns the difference in months between 2 dates',
         signatures: ['DIFF_MONTHS(a: date, b: date)'],
@@ -252,7 +262,7 @@ exports.scalarExpressionFunctions = {
         handler(args) {
             const [first, second] = dateUtils_1.normalizeDateParams(args);
             const result = differenceInYears_1.default(first, second);
-            return isNaN(result) ? '' : result;
+            return sanitizeNumericResult(result);
         },
         description: 'Returns the difference in years between 2 dates',
         signatures: ['DIFF_YEARS(a: date, b: date)'],

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -163,19 +163,39 @@ class AggregatedScalarCalculatedColumn {
         return this.expressionEvaluation.columnDependencies;
     }
     computeAggregatedValue(expressionEvaluation) {
-        const gridData = this.adaptableApi.gridApi.getGridData();
+        var _a;
+        const gridRowNodes = this.adaptableApi.gridApi.getAllRowNodes();
+        // we iterate over the RowNode list (we need this to handle complex column values (nested values, valueGetters etc)
+        // so we will map the fieldNames to RowNode.data
+        const mapReducerValueGetter = (fieldName) => {
+            return (rowNode) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, fieldName);
+        };
+        Object.values(expressionEvaluation.aggregationParams.reducers).forEach((aggregationReducer) => {
+            aggregationReducer.getter = mapReducerValueGetter(aggregationReducer.field);
+            // nullify the getter to force the fallback on the getter fn
+            aggregationReducer.field = null;
+        });
+        const mapGroupByToKey = (fieldName) => {
+            return (_unusableProperty, rowNode) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, fieldName);
+        };
+        (_a = expressionEvaluation.aggregationParams.groupBy) === null || _a === void 0 ? void 0 : _a.forEach((groupByDef) => {
+            groupByDef.toKey = mapGroupByToKey(groupByDef.field);
+        });
         if (!expressionEvaluation.cumulateOver) {
-            return scalarAggregationHelper_1.aggregate(expressionEvaluation.aggregationParams, gridData);
+            return scalarAggregationHelper_1.aggregate(expressionEvaluation.aggregationParams, gridRowNodes);
         }
         else {
             // 1. sort grid data by given OVER column
             const sortByColumn = expressionEvaluation.cumulateOver;
-            // currently we support only ascending sorting
-            gridData.sort((first, second) => {
-                if (first[sortByColumn] < second[sortByColumn]) {
+            const getRowNodeValue = (rowNode, columnId) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, columnId);
+            // currently, we support only ascending sorting
+            gridRowNodes.sort((first, second) => {
+                const firstValue = getRowNodeValue(first, sortByColumn);
+                const secondValue = getRowNodeValue(second, sortByColumn);
+                if (firstValue < secondValue) {
                     return -1;
                 }
-                if (first[sortByColumn] > second[sortByColumn]) {
+                if (firstValue > secondValue) {
                     return 1;
                 }
                 return 0;
@@ -184,11 +204,14 @@ class AggregatedScalarCalculatedColumn {
             if (!expressionEvaluation.aggregationParams.groupBy) {
                 expressionEvaluation.aggregationParams.groupBy = [];
             }
-            const gridPrimaryKey = this.adaptableApi.internalApi.getAdaptableOptions().primaryKey;
+            const gridPrimaryKeyColumn = this.adaptableApi.internalApi.getAdaptableOptions().primaryKey;
             // !! aggregationParams mutated
-            expressionEvaluation.aggregationParams.groupBy.push({ field: gridPrimaryKey });
+            expressionEvaluation.aggregationParams.groupBy.push({
+                field: gridPrimaryKeyColumn,
+                toKey: mapGroupByToKey(gridPrimaryKeyColumn),
+            });
             // 3. cumulate
-            return scalarAggregationHelper_1.cumulate(expressionEvaluation.aggregationParams, gridData);
+            return scalarAggregationHelper_1.cumulate(expressionEvaluation.aggregationParams, gridRowNodes);
         }
     }
     getAggregationValue(rowNode) {

package/src/View/AdaptablePopover/index.d.ts

@@ -12,6 +12,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<AdaptablePo
     useButton?: boolean;
     tooltipText?: string;
     popoverMinWidth?: number;
+    popupPadding?: number;
 }
 export declare class AdaptablePopover extends React.Component<AdaptablePopoverProps, {}> {
     render(): JSX.Element;

package/src/View/AdaptablePopover/index.js

@@ -11,7 +11,7 @@ const OverlayTrigger_1 = tslib_1.__importDefault(require("../../components/Overl
 const rebass_1 = require("rebass");
 class AdaptablePopover extends React.Component {
     render() {
-        var _a;
+        var _a, _b;
         let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
         const showIcon = (_a = this.props.showIcon) !== null && _a !== void 0 ? _a : true;
         let useButton = this.props.useButton != null ? this.props.useButton : false;
@@ -27,7 +27,7 @@ class AdaptablePopover extends React.Component {
             } },
             title ? (React.createElement(rebass_1.Text, { fontSize: 2, padding: 2 },
                 React.createElement("b", null, title))) : null,
-            React.createElement(rebass_1.Box, { padding: 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
+            React.createElement(rebass_1.Box, { className: "ab-Popover__body", padding: (_b = this.props.popupPadding) !== null && _b !== void 0 ? _b : 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
         const icon = 'info'; // - think this is wrong - UIHelper.getGlyphByMessageType(messageType);
         const color = UIHelper_1.UIHelper.getColorByMessageType(messageType);
         const iconStyle = {

package/src/View/AdaptableView.js

@@ -20,14 +20,20 @@ class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d;
         const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
+        const adaptableOptions = this.props.AdaptableApi.internalApi.getAdaptableOptions();
         return (React.createElement("div", null,
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
-            React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
-                    .maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+            React.createElement(react_toastify_1.ToastContainer
+            // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
+            // instance is destroyed and re-created many times
+            , { 
+                // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
+                // instance is destroyed and re-created many times
+                containerId: adaptableOptions.adaptableId, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups_1.WindowPopups, null),
             React.createElement(FormPopups_1.FormPopups, null),

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -70,7 +70,7 @@ exports.CalculatedColumnExpressionWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Pivotable,
                 Aggregatable }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { flex: 1, overflow: 'auto' } },
+    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
         React.createElement(QueryTab, { value: "ScalarExpression", type: type, label: "Scalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'ScalarExpression' },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -34,7 +34,7 @@ exports.isValidCalculatedColumnSettings = (data, api) => {
     var _a;
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
-        return 'Column id cannot be empty';
+        return 'Column Id cannot be empty';
     }
     if (!((_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.DataType)) {
         return 'No data type specified for column';

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IModule } from '../../../Strategy/Interface/IModule';
+import { AdaptableObject } from '../../../types';
+export interface AdaptableObjectCompactListItemProps {
+    module: IModule;
+    abObject: AdaptableObject;
+}
+export declare const AdaptableObjectCompactListItem: React.FunctionComponent<AdaptableObjectCompactListItemProps>;
+export interface AdaptableObjectCompactListProps {
+    abObjects: AdaptableObject[];
+    module: IModule;
+}
+export declare const AdaptableObjectCompactList: React.FunctionComponent<AdaptableObjectCompactListProps>;

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableObjectCompactList = exports.AdaptableObjectCompactListItem = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ValueSelector_1 = require("../ValueSelector");
+const baseClassName = 'ab-Adaptable-Object-Compact-List';
+const ICON_SIZE = 20;
+exports.AdaptableObjectCompactListItem = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const dispatch = react_redux_1.useDispatch();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const objectView = props.module.toViewCompact(props.abObject);
+    const viewOptions = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
+    const deleteAction = (_c = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.abObject);
+    const moduleAccessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
+    const handleDelete = React.useCallback(() => {
+        dispatch(deleteAction);
+    }, []);
+    return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item__Name` }, (_d = objectView.item.label) !== null && _d !== void 0 ? _d : objectView.item.name),
+        React.createElement(rebass_1.Box, { flex: 1 },
+            objectView.item.view &&
+                React.createElement(objectView.item.view, {
+                    data: props.abObject,
+                }),
+            Boolean(((_e = objectView.item) === null || _e === void 0 ? void 0 : _e.values) && ((_g = (_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) === null || _g === void 0 ? void 0 : _g.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
+                React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
+        React.createElement(rebass_1.Flex, null, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onClick: handleDelete, accessLevel: moduleAccessLevel })))));
+};
+exports.AdaptableObjectCompactList = (props) => {
+    return (React.createElement("div", { className: baseClassName }, props.abObjects.map((abObject) => {
+        return React.createElement(exports.AdaptableObjectCompactListItem, { abObject: abObject, module: props.module });
+    })));
+};

package/src/View/Components/EntityRulesEditor/index.js

@@ -13,6 +13,7 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
+const react_1 = require("react");
 exports.isRuleValid = (abObject, api, context) => {
     var _a, _b, _c, _d, _e, _f;
     if (!((_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) && !((_b = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression)) {
@@ -128,7 +129,7 @@ exports.EntityRulesEditor = (props) => {
     const setAggregationExpression = (expression) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
     };
-    const initialData = api.internalApi.getQueryPreviewData();
+    const initialData = react_1.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
         children,

package/src/View/Components/ExpressionWizard.js

@@ -9,6 +9,7 @@ const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const react_1 = require("react");
 class ExpressionWizard extends React.Component {
     constructor(props) {
         var _a, _b;
@@ -28,7 +29,7 @@ class ExpressionWizard extends React.Component {
         };
     }
     render() {
-        const initialData = this.props.api.internalApi.getQueryPreviewData();
+        const initialData = react_1.useMemo(() => this.props.api.internalApi.getQueryPreviewData(), []);
         return (React.createElement(React.Fragment, null,
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getAllNamedQuery(), api: this.props.api }),
             ' ',

package/src/View/Components/FilterForm/FilterForm.d.ts

@@ -4,7 +4,10 @@ import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
 import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
 export interface FilterFormState {
     columnFilters: ColumnFilter[];
-    distinctColumnValues: any[];
+    distinctColumnValues: {
+        label: string;
+        value: any;
+    }[];
     isDistinctColumnValuesLoading: boolean;
     showTab: boolean;
     selectedTab: ColumnMenuTab;

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -5,7 +5,10 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
     columns: AdaptableColumn[];
     useAgGridStyle?: boolean;
-    columnDistinctValues: any[];
+    columnDistinctValues: {
+        label: string;
+        value: any;
+    }[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
     dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -40,9 +40,9 @@ exports.ListBoxFilterForm = (props) => {
             setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
         }
     };
-    const columnValuesItemsElements = props.columnDistinctValues.map((x, y) => {
-        const isActive = UiSelectedColumnValues.indexOf(x) >= 0;
-        const columnValue = x;
+    const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
+        const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
+        const columnValue = distinctValue.value;
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
             return null;
         }
@@ -53,13 +53,13 @@ exports.ListBoxFilterForm = (props) => {
         }
         if (props.useAgGridStyle) {
             return renderItemForAgGridStyle({
-                key: 'columnValue' + y,
-                children: columnValue,
+                key: 'columnValue' + index,
+                children: distinctValue.label,
                 checked: isActive,
-                onChange: () => onClickItemColumnValue(x),
+                onChange: () => onClickItemColumnValue(distinctValue.value),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: columnValue }, distinctValue.label));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -19,6 +19,7 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
+const date_fns_1 = require("date-fns");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -214,6 +215,19 @@ class QuickFilterFormComponent extends React.Component {
         if (this.props.quickFilterValuesTrigger === 'click') {
             showEvent = 'click';
         }
+        let selectedValues = filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
+        if (filter.Predicate.Inputs.length) {
+            selectedValues = filter.Predicate.Inputs.map((input) => {
+                var _a, _b;
+                const label = (_b = (_a = this.state.distinctColumnValues) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
+                    if (input instanceof Date) {
+                        return date_fns_1.isSameDay(input, distinctValue.value);
+                    }
+                    return distinctValue.value === input;
+                })) === null || _b === void 0 ? void 0 : _b.label;
+                return label !== null && label !== void 0 ? label : input;
+            }).join(', ');
+        }
         return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", showEvent: showEvent, 
             // cannot hide on blur, because the form input receives the input when this is opened
             hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
@@ -248,8 +262,7 @@ class QuickFilterFormComponent extends React.Component {
                     borderRadius: 0,
                     borderLeftWidth: 0,
                     borderColor: 'var(--ab-color-primarydark)',
-                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, filter.Predicate.Inputs.join(', ') ||
-                (filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values'))));
+                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
     }
     onColumnValuesChange(columnValues) {
         var _a;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -105,7 +105,7 @@ exports.AdaptablePopupModuleView = (props) => {
                 "s not available in current Layout")));
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        !!(items === null || items === void 0 ? void 0 : items.length) && toggleButtonShowLayoutAssociatedObjects(),
+        toggleButtonShowLayoutAssociatedObjects(),
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };

package/src/View/Components/Popups/AdaptableToaster.js

@@ -11,6 +11,7 @@ exports.showToast = (props) => {
     // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
+        react_toastify_1.toast.dismiss(); // remove all toasts
         api = null;
     });
     const toastProps = ObjectFactory_1.default.CreateToastOptions(props.api.internalApi.getAdaptableOptions().notificationsOptions, {

package/src/View/Components/TagValueSelector/index.js

@@ -12,11 +12,12 @@ exports.TagValueSelector = (props) => {
         return (_a = api.internalApi.getAvailableTags()) !== null && _a !== void 0 ? _a : [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => tag.value), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
-        }, selectionBoxPosition: 'top', toIdentifier: (tag) => tag.value, toLabel: (tag) => tag.label, noSelectionLabel: singleSelect ? 'Select a tag' : 'You have not selected any tags.', xSelectedLabel: singleSelect ? () => 'Selected tag:' : () => 'Selected tags:' }));
+        }, selectionBoxPosition: 'top', toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), noSelectionLabel: singleSelect ? 'Select a tag' : 'You have not selected any tags.', xSelectedLabel: singleSelect ? () => 'Selected tag:' : () => 'Selected tags:' }));
 };
 exports.TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
-    return (React.createElement(ValueSelector_1.ValueOptionsTags, { options: tags, value: tags.map((tag) => tag.value), toIdentifier: (tag) => tag.value, toLabel: (tag) => tag.label, allowWrap: true, readOnly: true }));
+    const { api } = AdaptableContext_1.useAdaptable();
+    return (React.createElement(ValueSelector_1.ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
 };

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -20,8 +20,8 @@ const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/Actio
 const ConditionalStyleSettingsWizardSettings_1 = require("./ConditionalStyleSettingsWizardSettings");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 exports.ConditionalStyleWizard = (props) => {
-    var _a;
-    const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
+    var _a, _b;
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
     const [conditionalStyle, setConditionalStyle] = react_1.useState(() => {
         var _a, _b, _c;
         const DEFAULT_RULE = {

package/src/View/Export/ReportExportDropdown.js

@@ -32,6 +32,6 @@ exports.ReportExportDropdown = (props) => {
     if ((report === null || report === void 0 ? void 0 : report.Name) === GeneralConstants_1.VISUAL_DATA_REPORT) {
         destinationItems.forEach((item) => (item.disabled = item.label === Enums_1.ExportDestination.Excel ? false : true));
     }
-    return (React.createElement(DropdownButton_1.default, { tooltip: "Export Report", variant: "text", items: destinationItems },
+    return (React.createElement(DropdownButton_1.default, { columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
         React.createElement(icons_1.Icon, { name: "export" })));
 };

package/src/View/Filter/ActiveFiltersPanel.d.ts

@@ -1,14 +1,2 @@
 import * as React from 'react';
-import { AdaptableApi } from '../../Api/AdaptableApi';
-import { ColumnFilter } from '../../PredefinedConfig/FilterState';
-import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
-export interface ActiveFiltersPanelProps extends React.ClassAttributes<ActiveFiltersPanel> {
-    columnFilters: ColumnFilter[];
-    api: AdaptableApi;
-    accessLevel: AccessLevel;
-    onClear: (columnFilter: ColumnFilter) => void;
-}
-export declare class ActiveFiltersPanel extends React.Component<ActiveFiltersPanelProps, {}> {
-    render(): any;
-    private createRow;
-}
+export declare const ActiveFiltersPanel: React.FunctionComponent;

package/src/View/Filter/ActiveFiltersPanel.js

@@ -3,35 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveFiltersPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
-const Helper_1 = require("../../Utilities/Helpers/Helper");
-const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
-const rebass_1 = require("rebass");
-const stopPropagation = (e) => {
-    e.stopPropagation();
+const AdaptableContext_1 = require("../AdaptableContext");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const AdaptableObjectCompactList_1 = require("../Components/AdaptableObjectList/AdaptableObjectCompactList");
+exports.ActiveFiltersPanel = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.FilterModuleId);
+    const columnFilters = adaptable.api.filterApi.getAllColumnFilter();
+    return React.createElement(AdaptableObjectCompactList_1.AdaptableObjectCompactList, { abObjects: columnFilters, module: filterModule });
 };
-class ActiveFiltersPanel extends React.Component {
-    render() {
-        let colItems = [
-            { Content: 'Column Filter', Size: 9 },
-            { Content: '', Size: 3 },
-        ];
-        let rowElements = [];
-        this.props.columnFilters.forEach((columnFilter) => {
-            rowElements.push(this.createRow(colItems, columnFilter));
-        });
-        return (React.createElement("div", null,
-            React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
-            React.createElement("div", null, rowElements)));
-    }
-    createRow(colItems, columnFilter) {
-        let rowColItems = Helper_1.Helper.cloneObject(colItems);
-        rowColItems[0].Content = this.props.api.filterApi.columnFilterToString(columnFilter);
-        rowColItems[1].Content = (React.createElement(rebass_1.Flex, { justifyContent: "center", margin: 0, padding: 0, onClick: stopPropagation },
-            React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.props.onClear(columnFilter), tooltip: "Clear Filter", disabled: columnFilter == null, accessLevel: this.props.accessLevel })));
-        let rowElement = React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: columnFilter.ColumnId, colItems: rowColItems });
-        return rowElement;
-    }
-}
-exports.ActiveFiltersPanel = ActiveFiltersPanel;

package/src/View/Filter/FilterStatusBarSubPanelPopover.js

@@ -3,16 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterStatusBarSubPanelPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const AdaptableContext_1 = require("../AdaptableContext");
 const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
 exports.FilterStatusBarSubPanelPopover = () => {
-    const adaptable = AdaptableContext_1.useAdaptable();
-    const columnFilters = react_redux_1.useSelector((state) => state.Filter.ColumnFilters);
-    const accessLevel = adaptable.api.internalApi
-        .getEntitlementService()
-        .getEntitlementAccessLevelForModule(ModuleConstants.FilterModuleId);
-    const handleClear = React.useCallback((columnFilter) => adaptable.api.filterApi.clearColumnFilterByColumn(columnFilter.ColumnId), []);
-    return (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columnFilters: columnFilters, api: adaptable.api, accessLevel: accessLevel, onClear: handleClear }));
+    return React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null);
 };

package/src/View/Filter/FilterViewPanel.js

@@ -16,11 +16,11 @@ class FilterViewPanelComponent extends React.Component {
         super(props);
     }
     render() {
-        const activeFiltersPanel = (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columnFilters: this.props.ColumnFilters, api: this.props.api, accessLevel: this.props.accessLevel, onClear: (columnFilter) => this.onClearColumnFilter(columnFilter) }));
+        const activeFiltersPanel = React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null);
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null, ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(React.Fragment, null,
-                React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [activeFiltersPanel], 
+                React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [activeFiltersPanel], 
                     //  tooltipText={'Show Filter Details'}
                     useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 }),
                 React.createElement(ButtonClear_1.ButtonClear, { marginLeft: 1, marginBottom: 0, marginRight: 1, className: `ab-${elementType}__Filter__clear`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')))),