@adaptabletools/adaptable 12.0.2 → 12.0.5

package/src/Utilities/ExpressionFunctions/expressionFunctionUtils.js

@@ -19,12 +19,12 @@ const getStringValue = (context, stringArgument) => {
     return exports.isTextSearchCaseInsensitive(context) ? stringArgument.toLowerCase() : stringArgument;
 };
 exports.getStringValue = getStringValue;
-const isTextSearchCaseInsensitive = (context) => !context.api.internalApi.isTextComparisonCaseSensitive();
+const isTextSearchCaseInsensitive = (context) => !context.adaptableApi.internalApi.isTextComparisonCaseSensitive();
 exports.isTextSearchCaseInsensitive = isTextSearchCaseInsensitive;
 // returns an observable which filters the source$ emissions and emits only if the CellDataChangedInfo relates to the given column
 // optionally, if a filter function (where clause) is provided, it is also evaluated
 const getDataChangeLog$ = (context, columnNameFilter) => {
-    let dataChangeLog$ = context.api.internalApi.getDataService().dataChangeLog$;
+    let dataChangeLog$ = context.adaptableApi.internalApi.getDataService().dataChangeLog$;
     // filter only the given column changes
     dataChangeLog$ = dataChangeLog$.pipe(operators_1.filter((dataChangeLog) => dataChangeLog.column.columnId === columnNameFilter));
     // filter based on the WHERE clause
@@ -41,14 +41,14 @@ const handleWhereFunction = (args, context) => {
         // whereClauseResult
         return evaluator_1.evaluateNode(whereClauseExpressionNode, {
             node: rowNode,
-            api: context.api,
+            adaptableApi: context.adaptableApi,
             functions: context.whereClauseFunctions,
         });
     };
     // observableExpressionResult
     return evaluator_1.evaluateNode(reactiveExpressionNode, {
         node: context.node,
-        api: context.api,
+        adaptableApi: context.adaptableApi,
         functions: context.functions,
         filterFn,
     });
@@ -76,7 +76,7 @@ const handleColumnFunction = (args, context) => {
     if (StringExtensions_1.default.IsNullOrEmpty(args[0])) {
         throw new ExpressionEvaluationError_1.ExpressionEvaluationError('COL', `no column name is provided`);
     }
-    validateColumnId(args[0], context.api);
+    validateColumnId(args[0], context.adaptableApi);
     const result = {
         type: 'config',
         name: 'COL',

package/src/Utilities/ExpressionFunctions/observableExpressionFunctions.d.ts

@@ -1,4 +1,7 @@
 import { ExpressionFunction } from '../../parser/src/types';
+/**
+ * List of all the Observable Functions available in AdaptableQL
+ */
 export declare type ObservableFunctionName = 'WHERE' | 'COL' | 'TIMEFRAME' | ObservableFunction | ChangeFunction;
 declare type ObservableFunction = 'ROW_CHANGE' | 'GRID_CHANGE';
 declare type ChangeFunction = 'MAX' | 'MIN' | 'NONE' | 'COUNT';

package/src/Utilities/ExpressionFunctions/observableExpressionFunctions.js

@@ -32,12 +32,12 @@ exports.observableExpressionFunctions = {
                     return getDataChangeCount$(dataChangeLog$, timeframeChange$, operandParameter.value);
                 }
                 case 'MIN': {
-                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MIN', context.api);
+                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MIN', context.adaptableApi);
                     const timeframeChange$ = getTrailingRowValueChange$(dataChangeLog$, timeframeParameter.value);
                     return getDataChangeMin$(dataChangeLog$, timeframeChange$);
                 }
                 case 'MAX': {
-                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MAX', context.api);
+                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MAX', context.adaptableApi);
                     const timeframeChange$ = getTrailingRowValueChange$(dataChangeLog$, timeframeParameter.value);
                     return getDataChangeMax$(dataChangeLog$, timeframeChange$);
                 }
@@ -71,12 +71,12 @@ exports.observableExpressionFunctions = {
                     return getDataChangeCount$(dataChangeLog$, timeframeChange$, operandParameter.value);
                 }
                 case 'MIN': {
-                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MIN', context.api);
+                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MIN', context.adaptableApi);
                     const timeframeChange$ = getTrailingGridValueChange$(dataChangeLog$, timeframeParameter.value);
                     return getDataChangeMin$(dataChangeLog$, timeframeChange$);
                 }
                 case 'MAX': {
-                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MAX', context.api);
+                    expressionFunctionUtils_1.validateColumnType(operandParameter.column, ['Number'], 'MAX', context.adaptableApi);
                     const timeframeChange$ = getTrailingGridValueChange$(dataChangeLog$, timeframeParameter.value);
                     return getDataChangeMax$(dataChangeLog$, timeframeChange$);
                 }
@@ -229,11 +229,11 @@ const getDataChangedInfoStub = (context) => {
     var _a;
     let rowNodeStub;
     if (!context.filterFn) {
-        rowNodeStub = context.api.gridApi.getFirstRowNode();
+        rowNodeStub = context.adaptableApi.gridApi.getFirstRowNode();
     }
     else {
         // if there is a WHERE clause defined, find the first rowNode which satisfies the condition
-        context.api.internalApi.forAllRowNodesDo((rowNode) => {
+        context.adaptableApi.internalApi.forAllRowNodesDo((rowNode) => {
             if (!rowNodeStub) {
                 if (context.filterFn(rowNode)) {
                     rowNodeStub = rowNode;
@@ -243,10 +243,10 @@ const getDataChangedInfoStub = (context) => {
     }
     const rowNode = rowNodeStub;
     if (rowNode) {
-        const primaryKeyValue = context.api.gridApi.getPrimaryKeyValueForRowNode(rowNode);
-        const columnId = (_a = context.api.columnApi.getQueryableColumns()[0]) === null || _a === void 0 ? void 0 : _a.columnId;
-        const oldValue = context.api.gridApi.getCellRawValue(primaryKeyValue, columnId);
-        const column = context.api.columnApi.getColumnFromId(columnId);
+        const primaryKeyValue = context.adaptableApi.gridApi.getPrimaryKeyValueForRowNode(rowNode);
+        const columnId = (_a = context.adaptableApi.columnApi.getQueryableColumns()[0]) === null || _a === void 0 ? void 0 : _a.columnId;
+        const oldValue = context.adaptableApi.gridApi.getCellRawValue(primaryKeyValue, columnId);
+        const column = context.adaptableApi.columnApi.getColumnFromId(columnId);
         const newValue = oldValue;
         return {
             changedAt: Date.now(),
@@ -417,7 +417,7 @@ const getSlidingTimeframe$ = (source$, timeframeDuration, onTimeframeEnter, onTi
     }));
 };
 const getMaxTimeframeSize = (expressionValue, context) => {
-    let maxTimeframeSize = context.api.internalApi.getAdaptableOptions().adaptableQLOptions.expressionOptions
+    let maxTimeframeSize = context.adaptableApi.internalApi.getAdaptableOptions().adaptableQLOptions.expressionOptions
         .maxTimeframeSize;
     if (maxTimeframeSize > SYSTEM_MAX_TIMEFRAME_SIZE) {
         maxTimeframeSize = SYSTEM_MAX_TIMEFRAME_SIZE;

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.d.ts

@@ -1,3 +1,6 @@
 import { ExpressionFunction } from '../../parser/src/types';
+/**
+ * List of all the Scalar Functions available in AdaptableQL
+ */
 export declare type ScalarFunctionName = 'ADD' | 'SUB' | 'MUL' | 'DIV' | 'MOD' | 'POW' | 'MIN' | 'MAX' | 'AVG' | 'DATE' | 'NOW' | 'TODAY' | 'DAY' | 'WEEK' | 'MONTH' | 'YEAR' | 'ADD_DAYS' | 'ADD_WEEKS' | 'ADD_MONTHS' | 'ADD_YEARS' | 'DIFF_DAYS' | 'DIFF_WEEKS' | 'DIFF_MONTHS' | 'DIFF_YEARS' | 'SUB_STRING' | 'REPLACE' | 'COALESCE' | 'LEN' | 'UPPER' | 'LOWER' | 'CONCAT' | 'IF' | 'COL';
 export declare const scalarExpressionFunctions: Record<ScalarFunctionName, ExpressionFunction>;

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -95,14 +95,14 @@ exports.scalarExpressionFunctions = {
         handler(args, context) {
             var _a, _b;
             const columnId = args[0];
-            const column = (_a = context.api) === null || _a === void 0 ? void 0 : _a.columnApi.getColumnFromId(columnId);
+            const column = (_a = context.adaptableApi) === null || _a === void 0 ? void 0 : _a.columnApi.getColumnFromId(columnId);
             if (!column) {
                 throw new ExpressionEvaluationError_1.ExpressionEvaluationError('COL', `Column name "${columnId}" is not found`);
             }
             if (!column.queryable) {
                 throw new ExpressionEvaluationError_1.ExpressionEvaluationError('COL', `Column name "${columnId}" is not queryable`);
             }
-            return (_b = context.api) === null || _b === void 0 ? void 0 : _b.gridApi.getRawValueFromRowNode(context.node, columnId);
+            return (_b = context.adaptableApi) === null || _b === void 0 ? void 0 : _b.gridApi.getRawValueFromRowNode(context.node, columnId);
         },
         description: 'Returns the value of a column',
         signatures: ['[colName]', 'COL(name: string)'],

package/src/Utilities/Helpers/FormatHelper.js

@@ -6,6 +6,7 @@ const tslib_1 = require("tslib");
 // import dateFnsFormat from 'date-fns/format';
 const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const sentence_case_1 = require("sentence-case");
+const GeneralConstants_1 = require("../Constants/GeneralConstants");
 function Format(input, format) {
     if (format.Formatter === 'NumberFormatter') {
         return NumberFormatter(input, format.Options);
@@ -71,7 +72,7 @@ function NumberFormatter(input, options = {}) {
 }
 exports.NumberFormatter = NumberFormatter;
 function DateFormatter(input, options) {
-    if (input == null || input == undefined) {
+    if (input == null || input == undefined || input == 'Invalid Date') {
         return undefined;
     }
     try {
@@ -79,7 +80,7 @@ function DateFormatter(input, options) {
         if (typeof input === 'string') {
             input = new Date(input);
         }
-        return format_1.default(input, options.Pattern || '');
+        return format_1.default(input, (options === null || options === void 0 ? void 0 : options.Pattern) || GeneralConstants_1.DEFAULT_DATE_FORMAT_PATTERN);
     }
     catch (error) {
         return input;

package/src/Utilities/Helpers/Helper.js

@@ -128,7 +128,7 @@ function ReturnItemCount(items, itemName) {
 }
 exports.ReturnItemCount = ReturnItemCount;
 function IsInputNullOrEmpty(itemToCheck) {
-    if (itemToCheck == 'Invalid Date') {
+    if (itemToCheck == 'Invalid Date ') {
         return true;
     }
     if (typeof itemToCheck === 'string') {

package/src/Utilities/ObjectFactory.js

@@ -304,7 +304,7 @@ function CreateEmptyFreeTextColumn(isFilterable) {
 }
 exports.CreateEmptyFreeTextColumn = CreateEmptyFreeTextColumn;
 function CreateEmptyLayout(layout, adaptableColumns) {
-    return Object.assign(Object.assign({}, layout), { Uuid: Uuid_1.createUuid(), Columns: layout.Columns || [], ColumnSorts: layout.ColumnSorts || [], 
+    return Object.assign(Object.assign({}, layout), { Uuid: Uuid_1.createUuid(), Columns: layout.Columns || [], ColumnSorts: layout.ColumnSorts || [], ColumnFilters: layout.ColumnFilters || [], 
         //  ColumnFlexMap: layout.ColumnFlexMap || {},
         ColumnWidthMap: layout.ColumnWidthMap || {}, RowGroupedColumns: layout.RowGroupedColumns ||
             (adaptableColumns ? adaptableColumns.filter((c) => c.isGrouped).map((c) => c.columnId) : []) });

package/src/Utilities/Services/QueryLanguageService.js

@@ -19,7 +19,7 @@ class QueryLanguageService {
         const booleanAndScalarFunctions = this.getBooleanAndScalarFunctions(moduleExpressionFunctions);
         return parser.evaluate(expression, {
             node: rowNode,
-            api: this.adaptableApi,
+            adaptableApi: this.adaptableApi,
             functions: booleanAndScalarFunctions,
         });
     }
@@ -31,7 +31,7 @@ class QueryLanguageService {
         const aggregatedScalarFunctions = this.getModuleExpressionFunctions(module).aggregatedScalarFunctions;
         return parser.evaluate(expression, {
             node: null,
-            api: this.adaptableApi,
+            adaptableApi: this.adaptableApi,
             functions: aggregatedScalarFunctions,
         });
     }
@@ -40,7 +40,7 @@ class QueryLanguageService {
         const booleanAndScalarFunctions = this.getBooleanAndScalarFunctions(moduleExpressionFunctions);
         const reactiveExpression$ = parser.evaluate(reactiveExpression, {
             node: reactiveExpression,
-            api: this.adaptableApi,
+            adaptableApi: this.adaptableApi,
             functions: moduleExpressionFunctions.observableFunctions,
             whereClauseFunctions: booleanAndScalarFunctions,
         });
@@ -51,7 +51,7 @@ class QueryLanguageService {
         const booleanAndScalarFunctions = this.getBooleanAndScalarFunctions(moduleExpressionFunctions);
         const aggregationExpression$ = parser.evaluate(aggregationExpression, {
             node: aggregationExpression,
-            api: this.adaptableApi,
+            adaptableApi: this.adaptableApi,
             functions: moduleExpressionFunctions.aggregatedBooleanFunctions,
             whereClauseFunctions: booleanAndScalarFunctions,
         });

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

@@ -5,7 +5,7 @@ import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { ColumnFilter } from '../../types';
 export interface FilterSummaryProps extends Omit<ModuleSummaryProps<FilterSummaryComponent>, 'onClosePopup' | 'modalContainer'> {
     ColumnFilters: ColumnFilter[];
-    onClearFilter: (columnFilter: ColumnFilter) => LayoutRedux.LayoutFilterClearAction;
+    onClearFilter: (columnFilter: ColumnFilter) => LayoutRedux.LayoutColumnFilterClearAction;
 }
 export declare class FilterSummaryComponent extends React.Component<FilterSummaryProps, EditableConfigEntityState> {
     constructor(props: FilterSummaryProps);

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

@@ -3,7 +3,6 @@ import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableFormat } from '../../../PredefinedConfig/Common/AdaptableFormat';
 import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { FormatColumnApi } from '../../../types';
 export declare type FormatColumnFormatWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
@@ -11,7 +10,7 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, formattedColumnApi: FormatColumnApi) => string;
+export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, api: AdaptableApi) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;

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

@@ -78,7 +78,7 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
+const getFormatColumnFormatSummaryValue = (data, api) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
@@ -86,24 +86,17 @@ const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
             content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
-            //formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
-            //formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
+            content = FormatHelper_1.default.DateFormatter(new Date(2022, 0, 1), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
             content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
-            //formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
 };
 exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
-function splitArrayInTwo(arr) {
-    const half = Math.floor(arr.length - 1 / 2);
-    return [arr.slice(0, half), arr.slice(half)];
-}
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     var _a, _b, _c;
     return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
@@ -120,7 +113,7 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } })));
 };
 const renderFormatColumnFormatSummary = (data, api) => {
-    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api.formatColumnApi));
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api));
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {
@@ -157,7 +150,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
-const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -173,9 +166,12 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
                         React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
-                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options))),
-                    customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2 },
+                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options)))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
@@ -195,7 +191,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                         },
                     ] })))))));
 };
-const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -247,7 +243,6 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
         data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
-    const [leftCustomFormatters, rightCustomFormatters] = splitArrayInTwo(customFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -261,8 +256,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        leftCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }))),
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
                             React.createElement(Input_1.default, { type: "number", min: "0", 
@@ -279,8 +273,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        rightCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -322,10 +320,11 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         },
                     ] })))));
 };
-const renderStringFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
+    console.log('formatters', scopedCustomFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -341,8 +340,12 @@ const renderStringFormat = (data, _onChange, setFormatOption, customFormatters,
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout_1.default, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -376,15 +379,15 @@ const FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
-    const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
+    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
     if (Type === 'NumberFormatter') {
-        return renderNumberFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        return renderDateFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderDateFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'StringFormatter') {
-        return renderStringFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only available if ",

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { Layout } from '../../PredefinedConfig/LayoutState';
-import * as React from 'react';
+import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;

package/src/View/Layout/LayoutViewPanel.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
-const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
@@ -13,8 +13,9 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const react_redux_1 = require("react-redux");
 const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
@@ -54,8 +55,7 @@ function mapStateToProps(state, ownProps) {
         CurrentLayoutName,
         CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
         Layouts,
-        CanSave: state.Grid.CurrentLayout &&
-            !api.layoutApi.areLayoutsEqual(selectedLayout, state.Grid.CurrentLayout),
+        CanSave: state.Grid.CurrentLayout && !api.layoutApi.areDraftAndCurrentLayoutEqual(),
     };
 }
 function mapDispatchToProps(dispatch) {
@@ -63,7 +63,7 @@ function mapDispatchToProps(dispatch) {
         onSelectLayout: (layoutName) => dispatch(LayoutRedux.LayoutSelect(layoutName)),
         onSaveLayout: (layout) => {
             dispatch(LayoutRedux.LayoutSave(layout));
-            dispatch(LayoutRedux.LayoutUpdateCurrentDraft(null));
+            dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
         },
     };
 }

package/src/View/Layout/SaveLayoutButton.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SaveLayoutButton: React.FunctionComponent;

package/src/View/Layout/SaveLayoutButton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SaveLayoutButton = 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 ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const SaveLayoutButton = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(ModuleConstants.LayoutModuleId);
+    const dispatch = react_redux_1.useDispatch();
+    const currentDraftLayout = react_redux_1.useSelector((state) => state.Grid.CurrentLayout);
+    const isManualSaveLayout = !adaptable.api.layoutApi.shouldAutoSaveLayout(currentDraftLayout);
+    const handleSave = React.useCallback((layout) => {
+        dispatch(LayoutRedux.LayoutSave(layout));
+        dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
+    }, []);
+    const isSaveEnabled = currentDraftLayout && !adaptable.api.layoutApi.areDraftAndCurrentLayoutEqual();
+    if (!isManualSaveLayout) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(ButtonSave_1.ButtonSave, { ml: 1, variant: "text", iconSize: 15, onClick: () => handleSave(currentDraftLayout), tooltip: "Save Changes to Current Layout", disabled: !isSaveEnabled, accessLevel: accessLevel }));
+};
+exports.SaveLayoutButton = SaveLayoutButton;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -51,7 +51,7 @@ function BaseEditorInput(props) {
             result = expr.evaluate({
                 // we need a fully-fledged rowNode as Adaptable accesses internal methods of it
                 node: testRowNode,
-                api: props.api,
+                adaptableApi: props.api,
                 functions: expressionFunctions,
             });
         }