@adaptabletools/adaptable 22.0.6 → 22.0.8

package/src/View/Alert/Wizard/AlertScopeWizardSection.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Flex } from '../../../components/Flex';
+import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const AlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     let disableDataTypes = true;
@@ -18,10 +19,16 @@ export const AlertScopeWizardSection = (props) => {
             }, scope: data.Scope, updateScope: (Scope) => {
                 const newData = { ...data, Scope };
                 if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of any
-                    // if it was set to a predicate before
+                    const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'AnyChange' }],
+                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                            if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
+                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                            }
+                            return true;
+                        }),
                     };
                 }
                 if (newData.Rule.ObservableExpression !== undefined &&

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

@@ -21,11 +21,11 @@ export const renderCalculatedColumnDefinitionSummary = (data) => {
 export const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
-        return 'A Column ID is required.';
+        return 'A Column Name is required';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    return hasAlreadyExistingId ? 'A column with this ID already exists.' : true;
+    return hasAlreadyExistingId ? 'A column with this Name already exists' : true;
 };
 export const CalculatedColumnDefinitionWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -65,16 +65,16 @@ export const CalculatedColumnDefinitionWizardSection = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, null,
-                        React.createElement(FormRow, { label: "Column Id" },
-                            React.createElement(Input, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
-                        React.createElement(FormRow, { label: "Name" },
+                        React.createElement(FormRow, { label: "Column Name" },
+                            React.createElement(Input, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange })),
+                        React.createElement(FormRow, { label: "Column Header" },
                             React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                                     setColumnNameFocused(true);
                                 }, onBlur: () => {
                                     setColumnNameFocused(false);
-                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', width: 300, type: "text", placeholder: "Enter column name", onChange: handleColumnNameChange })),
-                        React.createElement(FormRow, { label: "Header Tooltip" },
-                            React.createElement(Input, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange })),
+                        React.createElement(FormRow, { label: "Column Header Tooltip" },
+                            React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
                                     HeaderToolTip: e.target.value,
                                 }) })),
                         React.createElement(FormRow, { label: "" },

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

@@ -4,7 +4,7 @@ import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Flex } from '../../../components/Flex';
 export const CalculatedColumnTypeWizardSection = (props) => {
     return (React.createElement(Tabs, null,
-        React.createElement(Tabs.Tab, null, "Calculated Column Expression Type"),
+        React.createElement(Tabs.Tab, null, "Calculated Column Type"),
         React.createElement(Tabs.Content, null,
             React.createElement(Flex, { flexDirection: "column" },
                 React.createElement(TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }),

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

@@ -67,6 +67,7 @@ export const CalculatedColumnWizard = (props) => {
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Type',
+                details: 'Select Type of Calculated Column',
                 renderSummary: () => {
                     return (React.createElement(Box, { className: "twa:text-2" },
                         "Expression Type: ",
@@ -79,7 +80,7 @@ export const CalculatedColumnWizard = (props) => {
             },
             {
                 title: 'Details',
-                details: 'Specify Calculated Column details',
+                details: 'Provide Calculated Column Details',
                 isValid: isValidCalculatedColumnDefinition,
                 renderSummary: renderCalculatedColumnDefinitionSummary,
                 render: () => {
@@ -99,7 +100,7 @@ export const CalculatedColumnWizard = (props) => {
             },
             {
                 title: 'Settings',
-                details: 'Specify Column properties',
+                details: 'Specify Calculated Column Properties',
                 isValid: isValidCalculatedColumnSettings,
                 renderSummary: renderCalculatedColumnSettingsSummary,
                 render: () => {
@@ -117,6 +118,7 @@ export const CalculatedColumnWizard = (props) => {
             },
             '-',
             {
+                details: 'Review the Calculated Column',
                 render: () => {
                     return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -196,6 +196,7 @@ export const FloatingFilterValues = (props) => {
                         height: '100%',
                         borderRadius: 'none',
                         border: 'none',
+                        fontSize: 'inherit',
                         // @ts-ignore ignore
                         '&:hover': {
                             border: 'none',

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AdaptableColumn } from '../../../types';
+export declare const ColumnGroupTag: React.FC<{
+    column: AdaptableColumn;
+}>;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Box } from '../../../components/Flex';
+export const ColumnGroupTag = ({ column }) => {
+    if (!column.columnGroup || column.columnGroup.groupCount <= 1)
+        return null;
+    return (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center" },
+        "Column Group: ",
+        column.columnGroup.friendlyName));
+};

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { ValueSelector } from '../ValueSelector';
+import { ColumnGroupTag } from '../ColumnGroupTag';
 export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
     const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
     const filterFn = useMemo(() => {
@@ -15,5 +16,7 @@ export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
             else {
                 onChange(colIds);
             }
-        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName }));
+        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, toListLabel: (c) => (React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center" },
+            c.friendlyName,
+            React.createElement(ColumnGroupTag, { column: c }))) }));
 };

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

@@ -4,7 +4,7 @@ import { isEqual } from 'date-fns';
 import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 import join from '../../../components/utils/join';
 import { Select } from '../../../components/Select';
-import { toDisplayValueDefault, TreeDropdown } from '../../../components/Tree/TreeDropdown';
+import { toDisplayValueDefault, toDisplayValueFromOptionTree, TreeDropdown, } from '../../../components/Tree/TreeDropdown';
 import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../../AdaptableContext';
 import { useMemo } from 'react';
@@ -93,13 +93,20 @@ export const ColumnValuesSelect = (props) => {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
         };
     }, [column.columnId]);
+    const treeDropdownToDisplayValue = React.useMemo(() => {
+        if (column.dataType === 'date') {
+            return toDateDisplayValue;
+        }
+        return (paths) => toDisplayValueFromOptionTree(paths, optionsFromProps);
+    }, [column.dataType, optionsFromProps]);
     const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (React.createElement(TreeDropdown, { style: {
             width: '100%',
             height: '100%',
             ...props.selectProps?.styles?.container,
-        }, toDisplayValue: column.dataType === 'date' ? toDateDisplayValue : undefined, fieldStyle: {
+        }, toDisplayValue: treeDropdownToDisplayValue, fieldStyle: {
             boxShadow: 'none',
             ...props.selectProps?.styles?.control,
+            ...props.selectProps?.styles?.valueContainer,
         }, resizable: true, onChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
             : props.onChange, options: options, 

package/src/View/Components/NewScopeComponent.js

@@ -71,47 +71,30 @@ export const NewScopeComponent = (props) => {
         }
         return allColumns;
     }, []);
-    const getScopeChoice = (scope) => {
+    const getTabFromScope = (scope) => {
         if (!scope) {
             return undefined;
         }
         if (scopeApi.scopeIsAll(scope)) {
-            return 'All';
+            return 'Row';
         }
-        if (scopeApi.scopeHasColumns(props.scope)) {
+        if (scopeApi.scopeHasColumns(scope)) {
             return 'Column';
         }
-        if (scopeApi.scopeHasDataType(props.scope)) {
+        if (scopeApi.scopeHasDataType(scope)) {
             return 'DataType';
         }
-        if (scopeApi.scopeHasColumnType(props.scope)) {
+        if (scopeApi.scopeHasColumnType(scope)) {
             return 'ColumnType';
         }
         return undefined;
     };
-    const onScopeSelectChanged = (value) => {
-        let newScope;
-        if (value == 'Column') {
-            newScope = {
-                ColumnIds: [],
-            };
+    const [activeTab, setActiveTab] = useState(() => getTabFromScope(props.scope));
+    const onTabChanged = (value) => {
+        setActiveTab(value);
+        if (value === 'Row') {
+            props.updateScope({ All: true });
         }
-        else if (value == 'DataType') {
-            newScope = {
-                DataTypes: [],
-            };
-        }
-        else if (value == 'ColumnType') {
-            newScope = {
-                ColumnTypes: [],
-            };
-        }
-        else {
-            newScope = {
-                All: true,
-            };
-        }
-        props.updateScope(newScope);
     };
     const onColumnsSelectedChanged = (cols) => {
         const newScope = {
@@ -120,7 +103,7 @@ export const NewScopeComponent = (props) => {
         props.updateScope(newScope);
     };
     const onCheckBoxDataTypeChecked = (checked, item) => {
-        let dataTypes = [].concat(scopeApi.getDataTypesInScope(props.scope));
+        let dataTypes = [].concat(scopeApi.getDataTypesInScope(props.scope) ?? []);
         if (checked) {
             dataTypes.push(item);
         }
@@ -135,7 +118,6 @@ export const NewScopeComponent = (props) => {
         };
         props.updateScope(newScope);
     };
-    const scopeChoice = getScopeChoice(props.scope);
     const dataTypesInScope = props.scope && 'DataTypes' in props.scope ? scopeApi.getDataTypesInScope(props.scope) : null;
     let dataTypeOptions = DATA_TYPES_OPTIONS;
     if (Array.isArray(props.availableDataTypes)) {
@@ -144,15 +126,15 @@ export const NewScopeComponent = (props) => {
     const hasColumnTypes = React.useMemo(() => {
         return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: { height: '100%', ...props.style }, onValueChange: onScopeSelectChanged },
+    return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
-            React.createElement(Radio, { className: "twa:m-0", checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
+            React.createElement(Radio, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1 }, "All Columns"))),
         !props.disableColumns && (React.createElement(Tabs.Tab, { value: "Column" },
-            React.createElement(Radio, { className: "twa:m-0", value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
+            React.createElement(Radio, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1 }, "Selected Columns"))),
         !props.disableDataTypes && (React.createElement(Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio, { className: "twa:m-0", value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+            React.createElement(Radio, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1 }, "Data Types"))),
         hasColumnTypes && (React.createElement(Tabs.Tab, { value: "ColumnType" },
-            React.createElement(Radio, { className: "twa:m-0", value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
+            React.createElement(Radio, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1 }, "Column Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, props.descriptions.rowScope))),
         !props.disableColumns && (React.createElement(Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto" },
@@ -161,15 +143,15 @@ export const NewScopeComponent = (props) => {
                 React.createElement(Box, { className: "twa:flex-3" }),
                 React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
             React.createElement(Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1" },
-                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
+                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged })))),
         !props.disableDataTypes && (React.createElement(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
             React.createElement(Box, null,
                 props.descriptions.dataTypeScope && (React.createElement(Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2" }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(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(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(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))))))),
         hasColumnTypes && (React.createElement(Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope" },
             React.createElement(Box, null,
                 React.createElement(Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
-                        let columnTypes = [].concat(props.scope.ColumnTypes);
+                        let columnTypes = [].concat('ColumnTypes' in props.scope ? props.scope.ColumnTypes : []);
                         if (checked) {
                             columnTypes.push(columnType);
                         }

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

@@ -10,5 +10,6 @@ export type ReorderDraggableProps<OPTION_TYPE, ID_TYPE extends number | string>
     onOptionClick?: (option: OPTION_TYPE, event: React.MouseEvent<HTMLDivElement>) => void;
     disabled?: boolean;
     style?: React.CSSProperties;
+    className?: string;
 };
 export declare function ReorderDraggable<OPTION_TYPE, ID_TYPE extends number | string>(props: ReorderDraggableProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;

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

@@ -4,6 +4,7 @@ import { Icon } from '../../../components/icons';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../components/Flex';
 import clsx from 'clsx';
+import { twMerge } from '../../../twMerge';
 export function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -27,7 +28,7 @@ export function ReorderDraggable(props) {
             }, draggableProvided.dragHandleProps);
         }));
     };
-    return (React.createElement(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
+    return (React.createElement(Flex, { style: props.style, className: twMerge(`${baseClassName} twa:flex-1`, props.className), flexDirection: "column" },
         React.createElement(DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const newOrder = ArrayExtensions.reorderArray(props.order, source.index, destination.index);

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

@@ -6,6 +6,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box, Flex } from '../../../components/Flex';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
+import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
 export const renderCustomSortColumn = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return (React.createElement(Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
@@ -54,6 +55,7 @@ export const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
+    const [columnsSearchText, setColumnsSearchText] = React.useState('');
     const onNameChange = (event) => {
         props.onChange({
             ...data,
@@ -71,7 +73,11 @@ export const CustomSortColumnWizardSection = (props) => {
         React.createElement(Tabs, { style: { flex: 1, minHeight: 0 } },
             React.createElement(Tabs.Tab, null, "Column"),
             React.createElement(Tabs.Content, null,
-                React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                    React.createElement(Box, { className: "twa:text-2" }, "Columns"),
+                    React.createElement(Box, { className: "twa:flex-3" }),
+                    React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
+                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
                         props.onChange({
                             ...data,
                             SortedValues: [],

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

@@ -39,7 +39,7 @@ export const CustomSortWizard = (props) => {
             {
                 isValid: (data) => isValidCustomSortColumn(data, allCustomSorts),
                 renderSummary: renderCustomSortColumn,
-                details: 'Enter Name and select a Column for Custom Sort',
+                details: 'Enter Name and select a Column to Sort',
                 render: () => {
                     return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Flex } from '../../../components/Flex';
+import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
@@ -12,10 +13,16 @@ export const FlashingAlertScopeWizardSection = (props) => {
             }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
                 const newData = { ...data, Scope };
                 if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of AnyChange
-                    // if it was set to a predicate before
+                    const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'AnyChange' }],
+                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                            if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
+                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                            }
+                            return true;
+                        }),
                     };
                 }
                 props.onChange(newData);

package/src/View/FormatColumn/Wizard/FormatColumnColumnScopeWizardSection.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
+import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const renderFormatColumnScopeSummary = (data) => {
     return renderScopeSummary(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -26,12 +26,19 @@ export const FormatColumnScopeWizardSection = (props) => {
                         newData.Rule.BooleanExpression = '';
                     }
                     else {
-                        // if scope is not whole row, if you have a predicate, reset it
-                        newData.Rule.Predicates = [
-                            {
-                                PredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
-                            },
-                        ];
+                        const validPredicateIds = new Set(api.formatColumnApi.internalApi
+                            .getFormatColumnDefsForScope(Scope)
+                            .map((def) => def.id));
+                        newData.Rule = {
+                            Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                                // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                                if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
+                                    return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                }
+                                return true;
+                            }),
+                        };
                     }
                 }
                 props.onChange(newData);

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -7,9 +7,7 @@ export function FormatColumnRuleWizardSection(props) {
     if (data.Target && data.Target === 'columnHeader') {
         return (React.createElement(HelpBlock, { className: "twa:mt-3" }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
     }
-    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
-        // TODO see what is this
-        predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
             selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -3,9 +3,7 @@ import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnColumnScopeWizardSection';
-import { FormatColumnRowScopeWizardSection, renderFormatColumnRowScopeSummary,
-// renderFormatColumnRowScopeSummary,
- } from './FormatColumnRowScopeWizardSection';
+import { FormatColumnRowScopeWizardSection, renderFormatColumnRowScopeSummary, } from './FormatColumnRowScopeWizardSection';
 import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleWizardSummary, } from './FormatColumnStyleWizardSection';
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FreeTextColumn } from '../../../AdaptableState/FreeTextColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => React.JSX.Element;
-export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column ID is required." | "A column with this ID already exists." | "A data type is required for the column.";
+export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column Name is required" | "A column with this Name already exists" | "A data type is required for the column";
 export type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -40,15 +40,15 @@ export const renderFreeTextColumnSummary = (data) => {
 export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getUIAvailableColumns();
     if (!data.ColumnId) {
-        return 'A Column ID is required.';
+        return 'A Column Name is required';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
     if (hasAlreadyExistingId) {
-        return 'A column with this ID already exists.';
+        return 'A column with this Name already exists';
     }
     if (!data.FreeTextColumnSettings.DataType) {
-        return 'A data type is required for the column.';
+        return 'A data type is required for the column';
     }
     return true;
 };
@@ -123,14 +123,14 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout, null,
-            React.createElement(FormRow, { label: "Column Id" },
-                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
             React.createElement(FormRow, { label: "Column Name" },
+                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) })),
+            React.createElement(FormRow, { label: "Column Header" },
                 React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                         setColumnNameFocused(true);
                     }, onBlur: () => {
                         setColumnNameFocused(false);
-                    }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
+                    }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) })),
             React.createElement(FormRow, { label: "Data Type" },
                 React.createElement(Box, { className: "twa:max-w-[500px]" },
                     React.createElement(Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
@@ -145,7 +145,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                     ? 'number'
                     : data.FreeTextColumnSettings.DataType === 'date'
                         ? 'date'
-                        : 'text', placeholder: "Default Column Value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
+                        : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
             React.createElement(FormRow, { label: "Header Tooltip" },
                 React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
                         HeaderToolTip: e.target.value,

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -71,7 +71,7 @@ export const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return isPivotLayout(layout) ? (React.createElement(OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return isPivotLayout(layout) ? (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -151,7 +151,7 @@ export const LayoutWizard = (props) => {
                     React.createElement(OnePageWizardSummary, null))),
                 title: 'Summary',
             },
-        ] })) : (React.createElement(OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Table Layout',

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -8,6 +8,7 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Select } from '../../../../components/Select';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
@@ -128,6 +129,7 @@ const ColumnRow = (props) => {
     }
     return (React.createElement(Flex, { alignItems: "center" },
         props.column.friendlyName,
+        React.createElement(ColumnGroupTag, { column: props.column }),
         aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
         currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
             React.createElement(Box, null, "Weight"),