@adaptabletools/adaptable-cjs 18.0.0-canary.8 → 18.0.0

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../PredefinedConfig/StyledColumnState';
-import { AdaptableScope } from '../../PredefinedConfig/Common/AdaptableScope';
+import { ColumnScope } from '../../PredefinedConfig/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
     columnComparison?: ColumnComparison;
     rangeValueType: NumericStyledColumn['RangeValueType'];
     onRangeValueTypeChange: (rangeValueType: NumericStyledColumn['RangeValueType']) => void;
-    scope: AdaptableScope;
+    scope: ColumnScope;
     api: AdaptableApi;
     showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;

package/src/View/Components/RangesComponent.js

@@ -118,7 +118,7 @@ class RangesComponent extends React.Component {
             this.props.updateColumnComparison(columnComparison);
         }
         else {
-            const ranges = this.props.api.scopeApi.createCellColorRangesForScope(this.props.scope);
+            const ranges = this.props.api.columnScopeApi.createCellColorRangesForScope(this.props.scope);
             this.setState({
                 rangesType: 'Standard',
             });

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -68,6 +68,6 @@ const PermittedValuesSelector = function (props) {
             handleSingleValueChange(value);
         }
     };
-    return (React.createElement(Select_1.Select, { isMulti: props.isMulti, className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoding: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
+    return (React.createElement(Select_1.Select, { isMulti: props.isMulti, className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoading: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
 };
 exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/SharedProps/WizardScopeState.d.ts

@@ -1,4 +1,4 @@
-import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
+import { ColumnScope } from '../../../PredefinedConfig/Common/ColumnScope';
 export interface WizardScopeState {
-    scope: AdaptableScope;
+    scope: ColumnScope;
 }

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

@@ -26,6 +26,7 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
     isOptionDisabled?: (option: OPTION_TYPE) => boolean;
     disabled?: boolean;
+    style?: React.CSSProperties;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
 export declare namespace ValueSelector {

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

@@ -66,7 +66,7 @@ function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(rebass_1.Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
+            return (React.createElement(rebass_1.Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier !== null && identifier !== void 0 ? identifier : index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
                 React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
                     reorderable ? (React.createElement(rebass_1.Box, Object.assign({ mr: 3 }, dragHandleProps),
                         React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
@@ -115,7 +115,7 @@ function ValueSelector(props) {
     };
     const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
     const showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
-    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", flex: 1 },
+    return (React.createElement(rebass_1.Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
         React.createElement(rebass_1.Flex, { mb: 1 },
             showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
             showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),

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

@@ -30,7 +30,7 @@ const CustomSortColumnWizardSection = (props) => {
         const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),
-            ...columnSortComparers.map((comparer) => api.scopeApi.getColumnIdsInScope(comparer.scope)),
+            ...columnSortComparers.map((comparer) => api.columnScopeApi.getColumnIdsInScope(comparer.scope)),
         ];
         // filter out used colum ids, but include the current one
         return sortableColumns.filter((column) => {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -99,7 +99,10 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                 {
                     columnId: 'undoActionColumn',
                     friendlyName: ' ',
-                    includeGroupedRows: true,
+                    rowScope: {
+                        ExcludeGroupRows: true,
+                        ExcludeSummaryRows: true,
+                    },
                     actionColumnSettings: { suppressMenu: true, suppressMovable: true },
                     actionColumnButton,
                 },
@@ -213,7 +216,6 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
         },
         autoGroupColumnDef: {
             sortable: true,
-            // suppressMenu: true,
         },
         columnDefs: [
             {

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -136,7 +136,7 @@ const DataImportWizard = (props) => {
         return [...userDefinedHandlers, ...systemFileHandlers_1.systemFileHandlers];
     }, []);
     const supportedFileFormats = React.useMemo(() => {
-        return fileHandlers.map((h) => h.fileExtension).join(', ');
+        return [...new Set(fileHandlers.map((h) => h.fileExtension)).values()].join(', ');
     }, [fileHandlers]);
     const readFile = React.useCallback(async (file) => {
         var _a, _b;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableFormat } from '../../../PredefinedConfig/Common/AdaptableFormat';
-import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
+import { ColumnScope } from '../../../PredefinedConfig/Common/ColumnScope';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export type FormatColumnFormatWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
@@ -12,5 +12,5 @@ export interface FormatColumnFormatWizardState {
 }
 export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => JSX.Element;
-export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
+export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;

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

@@ -149,6 +149,19 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'String') {
         return 'String';
     }
+    if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // need to check if all column with this column type has the same data type and return that particular one
+        const columns = scope.ColumnTypes.flatMap((columnType) => {
+            return api.columnApi.getColumnsByColumnType(columnType);
+        });
+        // check if all have the same type
+        if (columns.length &&
+            columns.every((column) => column.dataType === columns[0].dataType) &&
+            // supported data types
+            ['Number', 'Date', 'String'].includes(columns[0].dataType)) {
+            return columns[0].dataType;
+        }
+    }
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
@@ -196,7 +209,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -255,13 +268,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_c = data.DisplayFormat.Options.Prefix) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_d = data.DisplayFormat.Options.Suffix) !== null && _d !== void 0 ? _d : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
@@ -286,7 +299,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Input_1.default, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
@@ -404,7 +417,7 @@ const FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
-    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(data.Scope, displayFormatter.scope));
+    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.columnScopeApi.isScopeInScope(data.Scope, displayFormatter.scope));
     if (Type === 'NumberFormatter') {
         return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }

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

@@ -9,7 +9,7 @@ function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(EntityRulesEditor_1.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, showPredicate: !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+        predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, 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/FormatColumnScopeWizardSection.js

@@ -22,7 +22,7 @@ const FormatColumnScopeWizardSection = (props) => {
         }, scope: data.Scope, updateScope: (Scope) => {
             var _a, _b;
             const newData = Object.assign(Object.assign({}, data), { Scope });
-            const wholeRow = api.scopeApi.scopeIsAll(Scope);
+            const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
             if ((_b = (_a = newData.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) {
                 if (wholeRow) {
                     // if scope is whole row, a predicate cannot be present, so we set the rule

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

@@ -11,23 +11,26 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
 const Toggle_1 = require("../../../components/Toggle/Toggle");
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 const renderFormatColumnSettingsSummary = (data) => {
-    var _a;
+    var _a, _b, _c, _d;
     return (React.createElement(rebass_1.Box, { padding: 2 },
         React.createElement(rebass_1.Text, null,
             "Cell alignment ",
             React.createElement(Tag_1.Tag, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
         React.createElement(rebass_1.Text, { mt: 3 },
-            "Include grouped rows ",
-            React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+            "Data Rows ",
+            React.createElement(Tag_1.Tag, null, ((_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeDataRows) ? 'no' : 'yes')),
+        ' ',
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Group Rows ",
+            React.createElement(Tag_1.Tag, null, ((_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeGroupRows) ? 'no' : 'yes')),
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Summary Rows ",
+            React.createElement(Tag_1.Tag, null, ((_d = data.RowScope) === null || _d === void 0 ? void 0 : _d.ExcludeSummaryRows) ? 'no' : 'yes'))));
 };
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
+    var _a, _b, _c;
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const onCellAlignmentSelectChanged = (CellAlignment) => {
         const newData = Object.assign(Object.assign({}, data), { CellAlignment });
@@ -36,8 +39,14 @@ const FormatColumnSettingsWizardSection = (props) => {
         }
         props.onChange(newData);
     };
-    const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
+    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeDataRows }) }));
+    };
+    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeGroupRows: ExcludeGroupedRows }) }));
+    };
+    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeSummaryRows }) }));
     };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
@@ -55,8 +64,14 @@ const FormatColumnSettingsWizardSection = (props) => {
                             React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
                                     ? onCellAlignmentSelectChanged('Right')
                                     : onCellAlignmentSelectChanged(null) }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: (_a = data.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: (_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: (_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))))))));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;

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

@@ -13,7 +13,7 @@ const isFormatColumnStyleValid = (data, api) => {
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
         data.DisplayFormat === undefined &&
         data.CellAlignment === undefined &&
-        !api.scopeApi.isSingleBooleanColumnScope(data.Scope)) {
+        !api.columnScopeApi.isSingleBooleanColumnScope(data.Scope)) {
         return 'No format applied';
     }
     return true;

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -49,7 +49,7 @@ class FreeTextColumnSummaryComponent extends React.Component {
             this.state.editedAdaptableObject && (React.createElement(FreeTextColumnWizard_1.FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn();
+        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn(this.props.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
         configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({
             editedAdaptableObject: configEntity,

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

@@ -12,8 +12,10 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const AdaptableContext_1 = require("../../AdaptableContext");
 const FreeTextColumnWizard = (props) => {
     var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
     const [freeTextColumn, setFreeTextColumn] = (0, react_1.useState)(() => {
         var _a, _b;
@@ -23,7 +25,7 @@ const FreeTextColumnWizard = (props) => {
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
             return allFreeTextColumns.find((column) => column.ColumnId === props.popupParams.column.columnId);
         }
-        return ObjectFactory_1.default.CreateEmptyFreeTextColumn();
+        return ObjectFactory_1.default.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = (0, react_redux_1.useDispatch)();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -53,7 +53,7 @@ const QueryViewPanelComponent = (props) => {
                         paddingTop: 6,
                         overflow: 'hidden',
                         zIndex: 100,
-                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
+                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
             isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
             gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
             ' ',
@@ -79,11 +79,11 @@ const QueryViewPanelComponent = (props) => {
                         zIndex: 100,
                         height: '100%',
                         overflow: 'hidden',
-                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
+                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
     const saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
     const suspendButton = (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
     const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
         React.createElement(icons_1.Icon, { name: 'list' })));

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -63,7 +63,7 @@ const useGridFilterExpressionEditor = () => {
     const runQuery = (newExpression = expression) => {
         if (StringExtensions_1.default.IsNullOrEmpty(newExpression) &&
             StringExtensions_1.default.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
-            // user pressed enter key with an empty input => clear existing current query
+            // user pressed enter key with an empty input => clear existing expression
             adaptable.api.gridFilterApi.setGridFilterExpression('');
             return;
         }

package/src/View/Layout/LayoutViewPanel.js

@@ -29,8 +29,9 @@ class LayoutViewPanelComponent extends React.Component {
             return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        let layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, { flex: 1 },
+            React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
                 React.createElement(Select_1.Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
             React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),

package/src/View/Layout/TransposedPopup.js

@@ -8,23 +8,24 @@ const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout")
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
+const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
 const TransposedPopup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
     const rowNodes = React.useMemo(() => {
-        return adaptable.api.gridApi.getAllRowNodes();
+        return props.popupProps.visibleRows
+            ? adaptable.api.gridApi.getVisibleRowNodes()
+            : adaptable.api.gridApi.getAllRowNodes();
     }, [
-    // can be later triggered by ticking data
+    // can be later triggered by tickng data
     ]);
-    const { transposedColumnId, hideTransposedColumn = true } = props.popupProps;
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
-    // Thist must be qunique
-    const transposeByColumnId = primaryKey;
-    // Only used to show nice values a the top of the grid, istead on the value
-    // of the primarykey
-    const [synteticTransposedByColumnId, setSynteticTransposedByColumnId] = React.useState(transposedColumnId !== null && transposedColumnId !== void 0 ? transposedColumnId : primaryKey);
+    const [syntheticTransposedByColumnId, setSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
     const columns = React.useMemo(() => {
         // customisable
-        return adaptable.api.columnApi.getColumns();
+        return visibleColumns
+            ? adaptable.api.columnApi.getVisibleColumns()
+            : adaptable.api.columnApi.getColumns();
     }, []);
     const adaptableContainerId = 'transposed-adaptable-container';
     const agGridContainerId = 'transposed-adaptable-ag-grid-container';
@@ -43,9 +44,10 @@ const TransposedPopup = (props) => {
         for (const row of rowNodes) {
             // we force the col-ids to be strings, easer to work with
             //row[transposeByColumnId] + '';
-            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId) + '';
+            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
             //row[synteticTransposedByColumnId] + '';
-            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, synteticTransposedByColumnId) + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
+                '';
             transposedColumns.push({
                 colId,
                 header,
@@ -55,7 +57,7 @@ const TransposedPopup = (props) => {
             /**
              * We can hide the transposed column, if we want
              */
-            if (hideTransposedColumn && column.columnId === synteticTransposedByColumnId) {
+            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
                 continue;
             }
             const transposedRow = {
@@ -66,7 +68,7 @@ const TransposedPopup = (props) => {
             };
             for (let row of rowNodes) {
                 // [transposed-by-column-value[n]]: [other column value[n]]
-                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId);
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
                 // row[column.field]
                 let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
                 if (value instanceof Date) {
@@ -80,7 +82,7 @@ const TransposedPopup = (props) => {
             transposedColumns,
             transposedRows,
         };
-    }, [rowNodes, primaryKey, synteticTransposedByColumnId]);
+    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
     React.useEffect(() => {
         // Mounting in an effect, so the nodes are rendered/available
         const hostAdaptableOptions = adaptable.adaptableOptions;
@@ -98,7 +100,7 @@ const TransposedPopup = (props) => {
             },
             layoutOptions: {
                 createDefaultLayout: false,
-                autoSizeColumnsInLayout: true,
+                autoSizeColumnsInLayout: autosize,
             },
             predefinedConfig: {
                 Layout: {
@@ -124,7 +126,7 @@ const TransposedPopup = (props) => {
         };
         const firstColumn = {
             field: transposedFirstColumnHeader,
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(synteticTransposedByColumnId),
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
         };
         const agGridOptions = {
             suppressLoadingOverlay: true,
@@ -159,14 +161,14 @@ const TransposedPopup = (props) => {
             sideBar: false,
         };
         const modules = adaptable.getAgGridRegisteredModules();
-        const adaptableInitFn = Object.getPrototypeOf(adaptable).constructor.init;
-        const agGridConfig = {
-            gridOptions: agGridOptions,
-            modules: modules,
-        };
         let transposedAdaptableApi;
         (async () => {
-            transposedAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+            transposedAdaptableApi = await AdaptableAgGrid_1.AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
+                gridOptions: agGridOptions,
+                modules,
+            });
             adaptable.api.eventApi.on('ThemeChanged', (event) => {
                 transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });
@@ -176,7 +178,7 @@ const TransposedPopup = (props) => {
                 transposedAdaptableApi.destroy();
             }
         };
-    }, [synteticTransposedByColumnId]);
+    }, [syntheticTransposedByColumnId]);
     /**
      * Need to get all data, manualy pivot the grid using the primary key.
      *
@@ -188,8 +190,8 @@ const TransposedPopup = (props) => {
         React.createElement(Panel_1.default, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: synteticTransposedByColumnId, onChange: (colId) => {
-                            setSynteticTransposedByColumnId(colId);
+                    React.createElement(ColumnSelector_1.ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
+                            setSyntheticTransposedByColumnId(colId);
                         } })))),
         React.createElement(rebass_1.Flex, { height: "100%" },
             React.createElement(rebass_1.Box, { id: "transposed-adaptable-container" }),

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

@@ -18,6 +18,8 @@ const AggregationsSection_1 = require("./sections/AggregationsSection");
 const SortSection_1 = require("./sections/SortSection");
 const FilterSection_1 = require("./sections/FilterSection");
 const GridFilterSection_1 = require("./sections/GridFilterSection");
+const RowSummarySection_1 = require("./sections/RowSummarySection");
+const RowSummary_1 = require("../../../PredefinedConfig/Common/RowSummary");
 const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -31,14 +33,16 @@ const LayoutWizard = (props) => {
             preparedLayout = (0, Helper_1.cloneObject)(initialLayout);
             if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
                 preparedLayout.Name = '';
+                delete preparedLayout.Uuid;
             }
         }
         else {
             preparedLayout = ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
-            preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.agGridAdapter.initialGridOptions.suppressAggFuncInHeader;
+            preparedLayout.SuppressAggFuncInHeader = !!adaptable.agGridAdapter
+                .getAgGridApi()
+                .getGridOption('suppressAggFuncInHeader');
         }
         return preparedLayout;
     });
@@ -105,6 +109,7 @@ const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
+                isValid: RowSummarySection_1.areSummaryRowsValid,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
@@ -117,7 +122,37 @@ const LayoutWizard = (props) => {
                 renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: setLayout }))),
+                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
+                            let newLayout = (0, Helper_1.cloneObject)(layout);
+                            // if we do not have an weighted avg col, we need to clear the row summary if one exists
+                            if (newLayout.RowSummaries) {
+                                newLayout.RowSummaries = newLayout.RowSummaries.map((rowSummary) => {
+                                    return Object.assign(Object.assign({}, rowSummary), { ColumnsMap: Object.entries(rowSummary.ColumnsMap).reduce((acc, [columnId, aggFunc]) => {
+                                            if (
+                                            // see if it is weighted avg
+                                            aggFunc === RowSummary_1.WEIGHTED_AVERAGE_AGGREATED_FUNCTION &&
+                                                // see if we have a weight in the agg columns
+                                                newLayout.AggregationColumns[columnId] &&
+                                                (typeof newLayout.AggregationColumns[columnId] !== 'object' ||
+                                                    newLayout.AggregationColumns[columnId].weightColumnId)) {
+                                                // need to remove the row summary
+                                                return acc;
+                                            }
+                                            acc[columnId] = aggFunc;
+                                            return acc;
+                                        }, {}) });
+                                });
+                            }
+                            setLayout(newLayout);
+                        } }))),
+            },
+            {
+                title: 'Row Summaries',
+                details: 'Configure Row Summaries',
+                renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
+                isVisible: () => layoutSupportedFeatures.RowSummaries,
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowSummarySection_1.RowSummarySection, { onChange: setLayout }))),
             },
             {
                 title: 'Sort',

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

@@ -175,7 +175,7 @@ const ColumnRow = (props) => {
                     React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
                         React.createElement(Tag_1.Tag, null, props.column.columnId)),
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placeholder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormLayout_1.FormRow, { label: "Width" },

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

@@ -58,7 +58,7 @@ const FilterSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, { mb: 2 },
                 React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select column to create filter", onChange: (option) => {
+                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {