@adaptabletools/adaptable 14.0.3 → 14.1.0

package/src/View/{Components/Charting → Charting}/useChartingElements.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AccessLevel, ChartDefinition } from '../../../types';
+import { AccessLevel, ChartDefinition } from '../../types';
 export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
     elementType: string;
     accessLevel: AccessLevel;

package/src/View/{Components/Charting → Charting}/useChartingElements.js

@@ -4,11 +4,11 @@ exports.useChartingElements = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const useChartState_1 = require("./useChartState");
 const DeleteChartButton_1 = require("./DeleteChartButton");
 const EditChartButton_1 = require("./EditChartButton");
@@ -75,7 +75,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
     }
     const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
     const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || 'Ag Grid Window'));
-    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'outlined', tone: 'neutral' }, isOpen ? 'Close' : 'Open'));
+    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AdaptableColumnPredicate, AdaptablePredicateDef } from '../../../../types';
+import { EntityRulePredicatesEditorProps } from './EntityRulePredicatesEditor';
+export interface EntityPredicateEditorProps {
+    data: EntityRulePredicatesEditorProps['data'];
+    predicate?: AdaptableColumnPredicate;
+    onChange: EntityRulePredicatesEditorProps['onChange'];
+    predicateDefs: AdaptablePredicateDef[];
+    getPredicateDefsForColId?: (colId: string) => AdaptablePredicateDef[];
+    columnPredicateEnabled: boolean;
+}
+export declare const EntityRulePredicateEditor: React.FC<EntityPredicateEditorProps>;

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRulePredicateEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PredicateEditor_1 = require("../../PredicateEditor/PredicateEditor");
+const EntityRulePredicateEditor = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { predicate } = props;
+    const allColumns = React.useMemo(() => {
+        return api.columnApi.getColumns().map((column) => ({
+            label: column.friendlyName,
+            value: column.columnId,
+        }));
+    }, []);
+    const handleClear = () => {
+        var _a, _b;
+        const newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.filter((prevPredicate) => prevPredicate !== predicate);
+        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                Predicates: newPredicates,
+            } }));
+    };
+    const handlePredicateChange = (newPredicateDef) => {
+        var _a, _b;
+        let newPredicates = [];
+        if (predicate) {
+            newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map((prevPredicate) => {
+                if (prevPredicate === predicate) {
+                    return newPredicateDef;
+                }
+                return prevPredicate;
+            });
+        }
+        else {
+            // no previous predicate, e.g. it was cleared
+            newPredicates = [newPredicateDef];
+        }
+        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                Predicates: newPredicates,
+            } }));
+    };
+    const predicateDefs = React.useMemo(() => {
+        var _a;
+        let preparedPredicates = [];
+        if (props.getPredicateDefsForColId && ((_a = props === null || props === void 0 ? void 0 : props.predicate) === null || _a === void 0 ? void 0 : _a.ColumnId)) {
+            preparedPredicates = props.getPredicateDefsForColId(props.predicate.ColumnId);
+        }
+        else {
+            preparedPredicates = props.predicateDefs;
+        }
+        return preparedPredicates;
+    }, [props.predicate]);
+    const columnIdPredicateScopeEnabled = Boolean(props.columnPredicateEnabled);
+    const columnFriendlyName = (_a = allColumns.find((col) => col.value === (predicate === null || predicate === void 0 ? void 0 : predicate.ColumnId))) === null || _a === void 0 ? void 0 : _a.label;
+    const columnOptions = allColumns.map((col) => ({
+        label: col.label,
+        onClick: () => {
+            handlePredicateChange({ PredicateId: null, ColumnId: col.value, Inputs: [] });
+        },
+    }));
+    // use global scope or custom scope
+    let predicateColumnId = null;
+    if ((predicate === null || predicate === void 0 ? void 0 : predicate.ColumnId) && predicate.ColumnId !== '') {
+        predicateColumnId = predicate.ColumnId;
+    }
+    else if ('ColumnIds' in props.data.Scope && ((_c = (_b = props.data.Scope) === null || _b === void 0 ? void 0 : _b.ColumnIds) === null || _c === void 0 ? void 0 : _c[0])) {
+        predicateColumnId = (_e = (_d = props.data.Scope) === null || _d === void 0 ? void 0 : _d.ColumnIds) === null || _e === void 0 ? void 0 : _e[0];
+    }
+    return (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
+        React.createElement(rebass_1.Box, { flex: 1 },
+            React.createElement(FormLayout_1.default, null,
+                columnIdPredicateScopeEnabled && (React.createElement(FormLayout_1.FormRow, { label: "Column" },
+                    React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName !== null && columnFriendlyName !== void 0 ? columnFriendlyName : 'Select Column'))),
+                React.createElement(FormLayout_1.FormRow, { label: "Predicate" },
+                    React.createElement(PredicateEditor_1.PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
+        React.createElement(rebass_1.Box, null,
+            React.createElement(SimpleButton_1.default, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
+};
+exports.EntityRulePredicateEditor = EntityRulePredicateEditor;

package/src/View/Components/EntityRulesEditor/{PredicatesEditor.d.ts → EntityRulePredicatesEditor/EntityRulePredicatesEditor.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AdaptablePredicateDef, AdaptableScope } from '../../../types';
-import { EntityRulesEditorProps, RuleType } from './index';
-export interface PredicatesEditorProps {
+import { AdaptablePredicateDef, AdaptableScope } from '../../../../types';
+import { EntityRulesEditorProps, RuleType } from '../index';
+export interface EntityRulePredicatesEditorProps {
     descriptions: EntityRulesEditorProps<any>['descriptions'];
     data: {
         Rule: RuleType;
@@ -12,5 +12,7 @@ export interface PredicatesEditorProps {
         Scope: AdaptableScope;
     }) => void;
     predicateDefs: AdaptablePredicateDef[];
+    getPredicateDefsForColId?: (colId: string) => AdaptablePredicateDef[];
+    enablePredicateColumnId?: boolean;
 }
-export declare const PredicatesEditor: React.FunctionComponent<PredicatesEditorProps>;
+export declare const EntityRulePredicatesEditor: React.FunctionComponent<EntityRulePredicatesEditorProps>;

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRulePredicatesEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
+const DocumentationLinkConstants_1 = require("../../../../Utilities/Constants/DocumentationLinkConstants");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Tag_1 = require("../../../../components/Tag");
+const EntityRulePredicateEditor_1 = require("./EntityRulePredicateEditor");
+const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
+const getScopeViewItems_1 = require("../../../../Strategy/Utilities/getScopeViewItems");
+const EntityRulePredicatesEditor = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
+    const columnPredicateEnabled = props.data.Rule.Predicates.some((predicate) => predicate.ColumnId !== undefined);
+    // filter out predicates that are already in use
+    const defaultPredicateDefs = props.predicateDefs.filter((predicateDef) => {
+        var _a, _b;
+        return (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.every((rulePrediate) => rulePrediate.PredicateId !== predicateDef.id);
+    });
+    const handlePredicateScopeTypeChange = (columnPredicateEnabled) => {
+        if (columnPredicateEnabled) {
+            props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                    Predicates: [
+                        {
+                            PredicateId: null,
+                            ColumnId: '',
+                        },
+                    ],
+                } }));
+        }
+        else {
+            props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                    Predicates: [],
+                } }));
+        }
+    };
+    const handleAddNewPredicate = () => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                Predicates: [
+                    ...(((_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) || []),
+                    {
+                        PredicateId: defaultPredicateDefs[0].id,
+                        Inputs: [],
+                    },
+                ],
+            } }));
+    };
+    const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
+    const enablePredicateColumnId = (_a = props.enablePredicateColumnId) !== null && _a !== void 0 ? _a : true;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { mb: 2, justifyContent: "space-between" },
+            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
+            React.createElement(SimpleButton_1.default, { disabled: !((_c = (_b = props.data.Rule) === null || _b === void 0 ? void 0 : _b.Predicates) === null || _c === void 0 ? void 0 : _c.length), onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
+        enablePredicateColumnId && (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector", p: 2, mb: 2, flexDirection: "column" },
+            React.createElement(rebass_1.Text, { mb: 2 }, "Create Predicate Rule(s) using"),
+            React.createElement(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), mr: 3, checked: !columnPredicateEnabled },
+                "The Alert's Trigger:",
+                ' ',
+                React.createElement(Tag_1.Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
+                ' '),
+            React.createElement(Radio_1.default, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled }, "Selected Columns (overriding the Alert's Trigger)"))),
+        (((_e = (_d = props.data.Rule) === null || _d === void 0 ? void 0 : _d.Predicates) === null || _e === void 0 ? void 0 : _e.length) ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
+            const currentPredicatDef = props.predicateDefs.find((pd) => pd.id === (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId));
+            let editorPredicateDefs = defaultPredicateDefs;
+            if (currentPredicatDef) {
+                editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
+            }
+            return (React.createElement(React.Fragment, { key: `${index}-${predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId}` },
+                index > 0 && (React.createElement(rebass_1.Box, null,
+                    React.createElement(Tag_1.Tag, { mb: 3 }, "AND"))),
+                React.createElement(EntityRulePredicateEditor_1.EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })));
+        }),
+        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                fontSize: 'var(--ab-font-size-3)',
+                padding: 0,
+            } },
+            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+            "See Predicate documentation for more details and examples"))));
+};
+exports.EntityRulePredicatesEditor = EntityRulePredicatesEditor;

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/index.d.ts

@@ -0,0 +1 @@
+export { EntityRulePredicatesEditor } from './EntityRulePredicatesEditor';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRulePredicatesEditor = void 0;
+var EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
+Object.defineProperty(exports, "EntityRulePredicatesEditor", { enumerable: true, get: function () { return EntityRulePredicatesEditor_1.EntityRulePredicatesEditor; } });

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableRuleValid = void 0;
 const isAdaptableRuleValid = (abObject, api, context) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     if ((_b = (_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) {
         if (!api.predicateApi.isEveryPredicateValid((_c = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _c === void 0 ? void 0 : _c.Predicates)) {
             return `The Predicate${((_e = (_d = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _d === void 0 ? void 0 : _d.Predicates) === null || _e === void 0 ? void 0 : _e.length) === 1 ? ' is' : 's are'} not valid`;
@@ -23,6 +23,12 @@ const isAdaptableRuleValid = (abObject, api, context) => {
             return 'The Expression is not a valid Aggregated Boolean Expression';
         }
     }
+    if ((_o = (_m = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _m === void 0 ? void 0 : _m.Predicates) === null || _o === void 0 ? void 0 : _o.length) {
+        const isAPredicateWithInvalidColumnId = (_q = (_p = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _p === void 0 ? void 0 : _p.Predicates) === null || _q === void 0 ? void 0 : _q.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
+        if (isAPredicateWithInvalidColumnId) {
+            return 'Predicates with custom scope need a valid column';
+        }
+    }
     return true;
 };
 exports.isAdaptableRuleValid = isAdaptableRuleValid;

package/src/View/Components/EntityRulesEditor/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-import type { AdaptableModule, AdaptablePredicate, AdaptablePredicateDef, AdaptableScope } from '../../../types';
+import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
 export declare type RuleType = XOR<{
-    Predicates: AdaptablePredicate[];
+    Predicates: AdaptableColumnPredicate[];
 }, AdaptableQuery>;
 export declare type EntityRulesEditorProps<T> = {
     data: T;
@@ -17,6 +17,8 @@ export declare type EntityRulesEditorProps<T> = {
     onChange: (data: T) => void;
     defaultPredicateId: string;
     predicateDefs: AdaptablePredicateDef[];
+    getPredicateDefsForColId?: (colId: string) => AdaptablePredicateDef[];
+    enablePredicateColumnId?: boolean;
     children?: React.ReactNode;
     descriptions: {
         selectPredicate: React.ReactNode;

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

@@ -9,32 +9,49 @@ const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const PredicatesEditor_1 = require("./PredicatesEditor");
+const EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
 const QueryTab = (props) => {
     const { type, label, disabled = false } = props, tabProps = tslib_1.__rest(props, ["type", "label", "disabled"]);
     const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
         label,
         " ",
         React.createElement(rebass_1.Text, { fontSize: 2 }, "query")));
-    return (React.createElement(Tabs_1.Tabs.Tab, Object.assign({ style: { flex: 1 } }, tabProps), !disabled ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
+    return (React.createElement(Tabs_1.Tabs.Tab, Object.assign({ style: { flex: 1 } }, tabProps), !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 QueryTab.defaultProps = {
     isTabsTab: true,
 };
 const EntityRulesSummary = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { data } = props;
     const { api: { predicateApi, internalApi }, } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_c = (_b = (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (predicate, index) => (
+    if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) &&
+        !((_c = data === null || data === void 0 ? void 0 : data.Rule) === null || _c === void 0 ? void 0 : _c.BooleanExpression) &&
+        !((_d = data === null || data === void 0 ? void 0 : data.Rule) === null || _d === void 0 ? void 0 : _d.ObservableExpression) &&
+        !((_e = data === null || data === void 0 ? void 0 : data.Rule) === null || _e === void 0 ? void 0 : _e.AggregatedBooleanExpression)) {
+        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Rule defined");
+    }
+    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_h = (_g = (_f = data.Rule) === null || _f === void 0 ? void 0 : _f.Predicates) === null || _g === void 0 ? void 0 : _g.map) === null || _h === void 0 ? void 0 : _h.call(_g, (predicate, index) => (
     // predicate id is not unique
     React.createElement(React.Fragment, { key: index }, props.renderPredicate(predicateApi.predicateToString(predicate))))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
 };
 exports.EntityRulesSummary = EntityRulesSummary;
+const RuleTabTitle = (props) => {
+    return props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
+};
 const EntityRulesEditor = (props) => {
     var _a, _b, _c;
     const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const numberOfTabs = [
+        showNoRule,
+        showPredicate,
+        showObservable,
+        showBoolean,
+        showAggregation,
+    ].filter(Boolean).length;
+    const showRadioButtons = numberOfTabs > 1;
     const type = data.Rule == undefined
         ? 'NoRule'
         : data.Rule.BooleanExpression != undefined
@@ -98,20 +115,20 @@ const EntityRulesEditor = (props) => {
         children,
         React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
             showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
-                React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'NoRule' }, "No Condition"))) : null,
+                React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule' }, "No Condition"))) : null,
             showNoRule ? (React.createElement(Tabs_1.Tabs.Content, { value: 'NoRule' },
                 React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
-                React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
+                React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
-                React.createElement(PredicatesEditor_1.PredicatesEditor, { data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, onChange: props.onChange }))) : null,
-            showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
+                React.createElement(EntityRulePredicatesEditor_1.EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }))) : null,
+            showBoolean ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null,
             showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null,
-            showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
+            showObservable ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null,
             showObservable ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null,
-            showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
+            showAggregation ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
             showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null)));
 };

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

@@ -4,6 +4,11 @@ import { AdaptableColumn } from '../../types';
 export declare const isScopeValid: ({ Scope }: {
     Scope: AdaptableScope;
 }) => string | true;
+export declare const renderScopeSummary: (scope: AdaptableScope, labels: {
+    scopeWholeRow: string;
+    scopeColumns: string;
+    scopeDataTypes: string;
+}) => JSX.Element;
 export interface NewScopeComponentProps extends React.ClassAttributes<any> {
     scope: AdaptableScope;
     scopeColumns?: AdaptableColumn[];
@@ -14,11 +19,10 @@ export interface NewScopeComponentProps extends React.ClassAttributes<any> {
     descriptions: {
         rowScope: string;
         columnScope: string;
+        dataTypeScope?: string;
     };
+    disableDataTypes?: boolean;
+    disableColumns?: boolean;
+    isColumnAvailable?: (column: AdaptableColumn) => boolean;
 }
-export declare const renderScopeSummary: (scope: AdaptableScope, labels: {
-    scopeWholeRow: string;
-    scopeColumns: string;
-    scopeDataTypes: string;
-}) => JSX.Element;
 export declare const NewScopeComponent: (props: NewScopeComponentProps) => JSX.Element;

package/src/View/Components/NewScopeComponent.js

@@ -45,7 +45,6 @@ const DATA_TYPES_MAP = {
         value: 'Boolean',
     },
 };
-const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 const renderScopeSummary = (scope, labels) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const scopeApi = adaptable.api.scopeApi;
@@ -61,11 +60,18 @@ const renderScopeSummary = (scope, labels) => {
             React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
 };
 exports.renderScopeSummary = renderScopeSummary;
+const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 const NewScopeComponent = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const { scopeApi, columnApi } = api;
     const [columnsSearchText, setColumnsSearchText] = (0, react_1.useState)('');
-    const scopeColumns = props.scopeColumns || columnApi.getColumns();
+    const scopeColumns = React.useMemo(() => {
+        const allColumns = props.scopeColumns || columnApi.getColumns();
+        if (typeof props.isColumnAvailable === 'function') {
+            return allColumns.filter((c) => props.isColumnAvailable(c));
+        }
+        return allColumns;
+    }, []);
     const getScopeChoice = (scope) => {
         if (!scope) {
             return undefined;
@@ -131,19 +137,22 @@ const NewScopeComponent = (props) => {
     return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
             React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
-        React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns")),
-        React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types")),
+        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
+            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
+        !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
+            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
-            React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, props.descriptions.rowScope))),
-        React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
+            React.createElement(rebass_1.Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
+        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
             React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
                 React.createElement(rebass_1.Text, { fontSize: 2 }, props.descriptions.columnScope),
                 React.createElement(rebass_1.Flex, { flex: 3 }),
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
             React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
-                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged }))),
-        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
+                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
+        !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
+            React.createElement(rebass_1.Box, null,
+                props.descriptions.dataTypeScope && (React.createElement(rebass_1.Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
+                React.createElement(rebass_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label)))))))));
 };
 exports.NewScopeComponent = NewScopeComponent;

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

@@ -18,9 +18,9 @@ const WindowPopups = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const windowItems = (0, react_redux_1.useSelector)((state) => state.Popup.WindowPopup.PopupList);
-    return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem, index) => {
+    return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem) => {
         var _a, _b, _c, _d, _e, _f;
-        const Component = (_a = windowFactory_1.windowFactory[windowItem.Id]) !== null && _a !== void 0 ? _a : NoopComponent;
+        const Component = (_a = windowFactory_1.windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : NoopComponent;
         const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = tslib_1.__rest(_g, ["windowModalProps"]);
         const handleDismiss = () => {
             dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -2,4 +2,5 @@
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_QUERY_EDITOR = "WINDOW_QUERY_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
+export declare const SHOW_EXPORT_TABLE = "SHOW_EXPORT_TABLE";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_QUERY_EDITOR = void 0;
+exports.windowFactory = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_QUERY_EDITOR = void 0;
 const ExpandedQueryPopup_1 = require("../../../Query/ExpandedQueryPopup");
 const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
+const ExportTablePopup_1 = require("../../../Export/ExportTablePopup");
 exports.WINDOW_QUERY_EDITOR = 'WINDOW_QUERY_EDITOR';
 exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
+exports.SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
 exports.windowFactory = {
     [exports.WINDOW_QUERY_EDITOR]: ExpandedQueryPopup_1.ExpandedQueryPopup,
     [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
+    [exports.SHOW_EXPORT_TABLE]: ExportTablePopup_1.ExportTablePopup,
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -4,8 +4,11 @@ exports.PredicateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
+const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const icons_1 = require("../../../components/icons");
+const Tag_1 = require("../../../components/Tag");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
 const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
@@ -17,10 +20,7 @@ const PredicateEditor = (props) => {
         label: item.label,
         onClick: () => {
             var _a;
-            props.onChange({
-                PredicateId: item.id,
-                Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }),
-            });
+            props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: item.id, Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
         },
     })), [props.predicateDefs, props.onChange]);
     const handlePredicateInputChange = (e, index) => {
@@ -33,8 +33,19 @@ const PredicateEditor = (props) => {
         props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: inputs }));
     };
     const currentPredicateDef = props.predicateDefs.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    let icon = null;
+    if (currentPredicateDef) {
+        if ((0, AdaptableIconComponent_1.isAdaptableInternalIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+            icon = React.createElement(icons_1.Icon, { name: currentPredicateDef.icon.name });
+        }
+        else if ((currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon) && 'text' in (currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+            icon = React.createElement("span", null, currentPredicateDef.icon.text);
+        }
+    }
     return (React.createElement(rebass_1.Box, { className: baseClassName },
-        React.createElement(DropdownButton_1.default, { listStyle: { minWidth: 150 }, "data-name": "select-predicate", mb: 2, width: "100%", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'),
+        React.createElement(rebass_1.Flex, { justifyContent: "stretch", alignItems: "center" },
+            icon && React.createElement(Tag_1.Tag, { mr: 2 }, icon),
+            React.createElement(DropdownButton_1.default, { mb: 0, style: { flex: 1 }, listStyle: { minWidth: 150 }, "data-name": "select-predicate", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule')),
         React.createElement(rebass_1.Flex, null, (_a = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
             index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
             React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },

package/src/View/Components/PreviewResultsPanel.js

@@ -9,9 +9,36 @@ const check_1 = tslib_1.__importDefault(require("../../components/icons/check"))
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const columnsMap = new Map([
-    ['InitialValue', { field: 'InitialValue', defaultFlex: 1, header: 'Current', align: 'center' }],
-    ['ComputedValue', { field: 'ComputedValue', defaultFlex: 1, header: 'New', align: 'center' }],
-    ['ValidInfo', { field: 'ValidInfo', defaultWidth: 80, header: 'Valid', align: 'center' }],
+    [
+        'InitialValue',
+        {
+            field: 'InitialValue',
+            defaultFlex: 1,
+            header: 'Current',
+            align: 'center',
+            renderMenuIcon: false,
+        },
+    ],
+    [
+        'ComputedValue',
+        {
+            field: 'ComputedValue',
+            defaultFlex: 1,
+            header: 'New',
+            align: 'center',
+            renderMenuIcon: false,
+        },
+    ],
+    [
+        'ValidInfo',
+        {
+            field: 'ValidInfo',
+            defaultWidth: 80,
+            header: 'Valid',
+            align: 'center',
+            renderMenuIcon: false,
+        },
+    ],
 ]);
 const tableDOMProps = {
     style: { flex: 1 },

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -61,7 +61,7 @@ const CustomSortWizard = (props) => {
                     React.createElement(CustomSortValuesWizardSection_1.CustomSortValuesWizardSection, { onChange: setCustomSort }))),
             },
             {
-                details: 'Select Custom Sort tags',
+                details: 'Select Custom Sort Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },