@adaptabletools/adaptable 11.2.1-canary.0 → 11.2.3

package/src/Redux/ActionsReducers/TeamSharingRedux.d.ts

@@ -42,7 +42,7 @@ export interface TeamSharingCommitImportAction extends Redux.Action {
 }
 export interface TeamSharingCheckForUpdatesAction extends Redux.Action {
 }
-export declare const TeamSharingShare: (Entity: AdaptableObject, Module: AdaptableModule, Configuration: SharedEntityConfig) => TeamSharingShareAction;
+export declare const TeamSharingShare: (entity: AdaptableObject, module: AdaptableModule, configuration: SharedEntityConfig) => TeamSharingShareAction;
 export declare const TeamSharingSet: (Entities: SharedEntity[]) => TeamSharingSetAction;
 export declare const TeamSharingImportItem: (SharedEntity: SharedEntity) => TeamSharingImportItemAction;
 export declare const TeamSharingProcessImport: (ImportSteps: TeamSharingImportStep[]) => TeamSharingProcessImportAction;

package/src/Redux/ActionsReducers/TeamSharingRedux.js

@@ -12,11 +12,11 @@ exports.TEAMSHARING_REMOVE_ITEM = 'TEAMSHARING_REMOVE_ITEM';
 exports.TEAMSHARING_LINK_ITEM = 'TEAMSHARING_LINK_ITEM';
 exports.TEAMSHARING_UPDATE_ITEM = 'TEAMSHARING_UPDATE_ITEM';
 exports.TEAMSHARING_CHECK_FOR_UPDATES = 'TEAMSHARING_CHECK_FOR_UPDATES';
-exports.TeamSharingShare = (Entity, Module, Configuration) => ({
+exports.TeamSharingShare = (entity, module, configuration) => ({
     type: exports.TEAMSHARING_SHARE,
-    Entity,
-    Module,
-    Configuration,
+    Entity: entity,
+    Module: module,
+    Configuration: configuration,
 });
 exports.TeamSharingSet = (Entities) => ({
     type: exports.TEAMSHARING_SET,

package/src/Strategy/FilterModule.d.ts

@@ -17,6 +17,13 @@ export declare class FilterModule extends AdaptableModuleBase implements IModule
     addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     getTeamSharingAction(): TeamSharingImportInfo<ColumnFilter>;
+    toViewCompact(filter: ColumnFilter): {
+        item: {
+            name: string;
+            values: string[];
+        };
+        abObject: ColumnFilter;
+    };
     toView(filter: ColumnFilter): AdaptableObjectView;
     toViewAll(): AdaptableObjectView[];
     getViewProperties(): {

package/src/Strategy/FilterModule.js

@@ -77,12 +77,21 @@ class FilterModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             EditAction: FilterRedux.ColumnFilterEdit,
         };
     }
+    toViewCompact(filter) {
+        return {
+            item: {
+                name: this.api.columnApi.getFriendlyNameFromColumnId(filter.ColumnId),
+                values: [this.api.filterApi.columnFilterToString(filter)],
+            },
+            abObject: filter,
+        };
+    }
     toView(filter) {
         return {
             items: [
                 {
                     name: 'Column',
-                    values: [filter.ColumnId],
+                    values: [this.api.columnApi.getFriendlyNameFromColumnId(filter.ColumnId)],
                 },
                 {
                     name: 'Filter',
@@ -120,7 +129,7 @@ class FilterModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 return {
                     content: text,
                     popover,
-                    popoverMinWidth: 280,
+                    popoverMinWidth: 320,
                 };
             },
         };

package/src/Strategy/Interface/IModule.d.ts

@@ -62,6 +62,10 @@ export interface AdaptableObjectView {
      */
     abObject: AdaptableObject;
 }
+export interface AdaptableObjectCompactView {
+    item: AdaptableObjectItemView;
+    abObject: AdaptableObject;
+}
 export declare type AdaptableModuleViewAction = React.FunctionComponent<{
     data: AdaptableObject;
     accessLevel: AccessLevel;
@@ -130,6 +134,7 @@ export interface IModule {
      */
     toView?: (abObject: AdaptableObject) => AdaptableObjectView;
     toViewAll?: () => AdaptableObjectView[];
+    toViewCompact?: (abObject: AdaptableObject) => AdaptableObjectCompactView;
     getViewProperties?: () => AdaptableModuleView;
 }
 /**

package/src/Strategy/LayoutModule.js

@@ -144,7 +144,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     }
     toView(layout) {
         var _a, _b, _c, _d, _e, _f, _g;
-        const maxColumnsToDisplay = (_d = (_c = (_b = (_a = this.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.layoutOptions) === null || _b === void 0 ? void 0 : _b.viewOptions) === null || _c === void 0 ? void 0 : _c.maxColumnsToDisplay) !== null && _d !== void 0 ? _d : 10;
+        const maxColumnsToDisplay = (_d = (_c = (_b = (_a = this.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.layoutOptions) === null || _b === void 0 ? void 0 : _b.layoutViewOptions) === null || _c === void 0 ? void 0 : _c.maxColumnsToDisplay) !== null && _d !== void 0 ? _d : 10;
         const columnIdToFriendlyName = (columnId) => {
             return this.api.columnApi.getFriendlyNameFromColumnId(columnId);
         };
@@ -157,6 +157,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 .map((colId) => columnIdToFriendlyName(colId));
             columns = [...firstNColumns, `and other ${extraColumns}`];
         }
+        columns = columns.map((column) => this.api.columnApi.getFriendlyNameFromColumnId(column));
         return {
             items: [
                 {
@@ -220,9 +221,8 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         };
     }
     handleLayoutChange() {
-        // update objects associated with the current layout via the LayoutOptions.isObjectAssociatedWithLayout() method
-        if (!this.api.internalApi.getAdaptableOptions().layoutOptions.isObjectAvailableInLayout) {
-            // no need if no callback implementation is provided
+        if (!this.api.internalApi.hasLayoutSpecificObjects()) {
+            // no need if no callback implementation is provided or no auto checking
             return;
         }
         // PlusMinus

package/src/Strategy/Utilities/getObjectTagsViewItems.js

@@ -8,6 +8,6 @@ exports.getObjectTagsViewItems = (object, api) => {
     }
     return {
         name: 'Tags',
-        values: (_a = object === null || object === void 0 ? void 0 : object.Tags) === null || _a === void 0 ? void 0 : _a.map((tag) => tag.label),
+        values: (_a = object === null || object === void 0 ? void 0 : object.Tags) === null || _a === void 0 ? void 0 : _a.map((tag) => api.internalApi.getLabelForTag(tag)),
     };
 };

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -134,9 +134,12 @@ exports.DefaultAdaptableOptions = {
         autoSizeColumnsInLayout: false,
         autoSizeColumnsInPivotLayout: false,
         createDefaultLayout: false,
-        viewOptions: {
+        layoutViewOptions: {
             maxColumnsToDisplay: 10,
         },
+        layoutTagOptions: {
+            autoCheckTagsForLayouts: false,
+        },
     },
     menuOptions: {
         showAdaptableContextMenu: true,

package/src/Utilities/ExpressionFunctions/aggregatedBooleanExpressionFunctions.js

@@ -196,13 +196,14 @@ const getSumAggregation$ = (source$, initialSum) => {
 const getColumnValueSum = (column, context) => {
     let sum = 0;
     context.api.internalApi.forAllRowNodesDo((rowNode) => {
-        var _a;
         // if there is a WHERE clause defined, check if the current rowNode satisfies the condition
         if (context.filterFn && !context.filterFn(rowNode)) {
             return;
         }
-        const cellValue = (_a = rowNode.data) === null || _a === void 0 ? void 0 : _a[column];
-        // cell value may not always be defined (ex. group nodes)
+        if (context.api.gridApi.isGroupRowNode(rowNode)) {
+            return;
+        }
+        const cellValue = context.api.gridApi.getRawValueFromRowNode(rowNode, column);
         if (cellValue != undefined) {
             sum = sum + expressionFunctionUtils_1.getNumericValue(rowNode.data[column]);
         }

package/src/Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions.js

@@ -28,15 +28,7 @@ exports.aggregatedScalarExpressionFunctions = {
                 },
                 columnDependencies: [sumColumnName],
             };
-            if (groupByParameter) {
-                const groupByColumnName = groupByParameter.value;
-                aggregationExpressionEvaluation.aggregationParams.groupBy = [
-                    {
-                        field: groupByColumnName,
-                    },
-                ];
-                aggregationExpressionEvaluation.columnDependencies.push(groupByColumnName);
-            }
+            addGroupByParams(groupByParameter, aggregationExpressionEvaluation);
             const result = {
                 name: 'SUM',
                 type: 'aggregation',
@@ -149,15 +141,7 @@ exports.aggregatedScalarExpressionFunctions = {
                 },
                 columnDependencies: [avgColumnName],
             };
-            if (groupByParameter) {
-                const groupByColumnName = groupByParameter.value;
-                aggregationExpressionEvaluation.aggregationParams.groupBy = [
-                    {
-                        field: groupByColumnName,
-                    },
-                ];
-                aggregationExpressionEvaluation.columnDependencies.push(groupByColumnName);
-            }
+            addGroupByParams(groupByParameter, aggregationExpressionEvaluation);
             const result = {
                 name: 'AVG',
                 type: 'aggregation',
@@ -198,15 +182,7 @@ exports.aggregatedScalarExpressionFunctions = {
                 },
                 columnDependencies: [minColumnName],
             };
-            if (groupByParameter) {
-                const groupByColumnName = groupByParameter.value;
-                aggregationExpressionEvaluation.aggregationParams.groupBy = [
-                    {
-                        field: groupByColumnName,
-                    },
-                ];
-                aggregationExpressionEvaluation.columnDependencies.push(groupByColumnName);
-            }
+            addGroupByParams(groupByParameter, aggregationExpressionEvaluation);
             const result = {
                 name: 'MIN',
                 type: 'aggregation',
@@ -247,15 +223,7 @@ exports.aggregatedScalarExpressionFunctions = {
                 },
                 columnDependencies: [maxColumnName],
             };
-            if (groupByParameter) {
-                const groupByColumnName = groupByParameter.value;
-                aggregationExpressionEvaluation.aggregationParams.groupBy = [
-                    {
-                        field: groupByColumnName,
-                    },
-                ];
-                aggregationExpressionEvaluation.columnDependencies.push(groupByColumnName);
-            }
+            addGroupByParams(groupByParameter, aggregationExpressionEvaluation);
             const result = {
                 name: 'MAX',
                 type: 'aggregation',
@@ -337,3 +305,15 @@ exports.aggregatedScalarExpressionFunctions = {
         examples: ['[col1]', 'COL("col1")'],
     },
 };
+// !! mutates expressionEvaluation
+const addGroupByParams = (groupByParameter, expressionEvaluation) => {
+    if (groupByParameter) {
+        const groupByColumnName = groupByParameter.value;
+        expressionEvaluation.aggregationParams.groupBy = [
+            {
+                field: groupByColumnName,
+            },
+        ];
+        expressionEvaluation.columnDependencies.push(groupByColumnName);
+    }
+};

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/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/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/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" })));
 };