@adaptabletools/adaptable 12.1.4 → 12.1.7

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -13,13 +13,6 @@ const GridOptionsForm = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show ToolPanel" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.sideBar == true, onChange: (addSideBar) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.sideBar = addSideBar;
-                        props.onChangeadaptableOptions(abOptions);
-                    } })),
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsActionColumnsForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsActionColumnsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const UIOptionsActionColumnsForm = (props) => {
+    var _a, _b, _c;
+    const options = [
+        { value: 'clone', label: 'Clone' },
+        { value: 'create', label: 'Create' },
+        { value: 'edit', label: 'Edit' },
+        { value: 'delete', label: 'Delete' },
+    ];
+    const actionRowButtons = (_c = (_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons) !== null && _c !== void 0 ? _c : [];
+    const handleCheckChange = (type, checked) => {
+        var _a;
+        let newActionRowButtons = actionRowButtons;
+        if (checked) {
+            newActionRowButtons = [...newActionRowButtons, type];
+        }
+        else {
+            newActionRowButtons = newActionRowButtons.filter((item) => item !== type);
+        }
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions), { actionRowButtons: newActionRowButtons }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Row Action Buttons"),
+        React.createElement(rebass_1.Flex, { width: "100%", m: 2 }, options.map((option) => (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: option.value, checked: actionRowButtons.some((buttonName) => buttonName === option.value), onChange: (check) => handleCheckChange(option.value, check) }, option.label))))));
+};
+exports.UIOptionsActionColumnsForm = UIOptionsActionColumnsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../../types';
+export declare const UIOptionsSidebarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsSidebarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
+const prepareSidebarDef = (sideBar) => {
+    sideBar = sideBar;
+    if (typeof sideBar === 'boolean') {
+        sideBar = {
+            toolPanels: ALL_SIDEBAR_OPTIONS,
+        };
+    }
+    if (typeof sideBar === 'string') {
+        sideBar = {
+            toolPanels: [sideBar],
+        };
+    }
+    if (Array.isArray(sideBar)) {
+        sideBar = {
+            toolPanels: sideBar,
+        };
+    }
+    return sideBar !== null && sideBar !== void 0 ? sideBar : { toolPanels: [] };
+};
+const isSidebarChecked = (sideBar, panelName) => {
+    var _a;
+    return ((_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : []).some((panel) => {
+        const panelId = typeof panel === 'string' ? panel : panel.id;
+        return panelId === panelName;
+    });
+};
+const UIOptionsSidebarForm = (props) => {
+    var _a;
+    const { abOptions, onChange } = props;
+    const { gridOptions } = props.abOptions;
+    const sideBar = prepareSidebarDef(gridOptions.sideBar);
+    const renderSidebarCheckbox = (sidebarName) => {
+        return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
+    };
+    const handleToolpanelsChange = (panelName, check) => {
+        var _a, _b;
+        let newPanels = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : [];
+        if (check) {
+            newPanels = [...newPanels, panelName];
+        }
+        else {
+            newPanels = newPanels.filter((panel) => {
+                const panelId = typeof panel === 'string' ? panel : panel.id;
+                return panelId !== panelName;
+            });
+        }
+        let hiddenByDefault = (_b = sideBar.hiddenByDefault) !== null && _b !== void 0 ? _b : false;
+        if (newPanels.length === 0) {
+            hiddenByDefault = true;
+        }
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) }) });
+        props.onChange(newAbOptions);
+    };
+    let sidebarPosition = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.position) !== null && _a !== void 0 ? _a : 'right';
+    const handleSidebarPositionChange = (position) => {
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) }) });
+        props.onChange(newAbOptions);
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Tool Panels"),
+        React.createElement(rebass_1.Box, { m: 2 },
+            React.createElement(rebass_1.Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
+            React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
+                React.createElement(FormLayout_1.FormRow, { label: "Position" },
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
+                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
+                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
+                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
+};
+exports.UIOptionsSidebarForm = UIOptionsSidebarForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsStatusbarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsStatusbarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const UIOptionsStatusbarForm = (props) => {
+    var _a, _b, _c, _d;
+    const allPanels = (_c = (_b = (_a = props.abOptions.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
+        const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
+        if (previousItem) {
+            return Object.assign(Object.assign({}, previousItem), { align });
+        }
+        else {
+            const newPanel = {
+                statusPanel: panelId,
+                align,
+            };
+            return newPanel;
+        }
+    });
+    const leftPanels = allPanels.filter((panel) => !(panel === null || panel === void 0 ? void 0 : panel.align) || panel.align === 'left');
+    const centerPanels = allPanels.filter((panel) => panel.align === 'center');
+    const rightPanels = allPanels.filter((panel) => panel.align === 'right');
+    const handleTabChange = (tabs) => {
+        const leftPanels = panelIdtoPanel(tabs[0].Items, 'left');
+        const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
+        const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
+        const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    const disabled = false;
+    const panelToTabItemId = (panel) => { var _a; return (_a = panel.key) !== null && _a !== void 0 ? _a : panel.statusPanel; };
+    const tabs = [
+        {
+            Name: 'Left',
+            Items: leftPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Center',
+            Items: centerPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Right',
+            Items: rightPanels.map(panelToTabItemId),
+        },
+    ];
+    const allOptions = [
+        { Id: 'agTotalRowCountComponent', Title: 'Row Count' },
+        { Id: 'agTotalAndFilteredRowCountComponent', Title: 'Totals and Filtered Row Count' },
+        { Id: 'agFilteredRowCountComponent', Title: 'Filtered Row Count' },
+        { Id: 'agSelectedRowCountComponent', Title: 'Selected Row Count' },
+        { Id: 'agAggregationComponent', Title: 'Aggregation' },
+    ];
+    const availableItems = allOptions;
+    const [adaptablePanelTitle, setAdaptablePanelTitle] = React.useState('');
+    const [adaptablePanelAlign, setAdaptablePanelAlign] = React.useState('left');
+    const isAdaptablePanelTitleAvailable = !allPanels.some((panel) => panel.key === adaptablePanelTitle);
+    const alignOptions = [
+        { onClick: () => setAdaptablePanelAlign('left'), value: 'left', label: 'Left' },
+        { onClick: () => setAdaptablePanelAlign('center'), value: 'center', label: 'Center' },
+        { onClick: () => setAdaptablePanelAlign('right'), value: 'right', label: 'Right' },
+    ];
+    const handleNewAdaptablePanel = () => {
+        const newAdaptablePanel = {
+            statusPanel: 'AdaptableStatusPanel',
+            align: adaptablePanelAlign,
+            key: adaptablePanelTitle,
+        };
+        const newStatusbarPanels = [...allPanels, newAdaptablePanel];
+        setAdaptablePanelTitle('');
+        setAdaptablePanelAlign('left');
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Status Bar"),
+        React.createElement(rebass_1.Box, { p: 2 },
+            React.createElement(rebass_1.Box, { style: {
+                    border: '1px solid var(--ab-color-primarydark)',
+                    borderRadius: 'var(--ab__border-radius)',
+                    marginBottom: 'var(--ab-space-2)',
+                    paddingBottom: 'var(--ab-space-1)',
+                    backgroundColor: 'var(--ab-color-defaultbackground)',
+                    padding: 'var(--ab-space-2)',
+                } },
+                React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
+                React.createElement(FormLayout_1.default, { mt: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
+                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placehoder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Align" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, (_d = alignOptions.find((option) => option.value === adaptablePanelAlign)) === null || _d === void 0 ? void 0 : _d.label)),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
+                        !isAdaptablePanelTitleAvailable && (React.createElement(rebass_1.Box, { mt: 2, color: "var(--ab-color-error)" }, "Adaptable panel name must be unique."))))),
+            React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+                    createTab: false,
+                    dragAndDropTab: false,
+                    deleteTab: false,
+                    editTabName: false,
+                }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
+};
+exports.UIOptionsStatusbarForm = UIOptionsStatusbarForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+interface UIElementsOptionsProps {
+    adaptableOptions: AdaptableOptions;
+    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+}
+export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
+export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIElementsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
+const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
+const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
+const UIElementsForm = (props) => {
+    let abOptions = props.adaptableOptions;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
+        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
+        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions })));
+};
+exports.UIElementsForm = UIElementsForm;

package/src/View/AdaptableWizardView/Wizard.js

@@ -41,6 +41,7 @@ const Wizard = (props) => {
     const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
     const [isDataLoading, setIsDataLoading] = react_1.useState(false);
     const handleDataSource = (array, file) => {
+        var _a;
         const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
         try {
             Utils_1.validDataSource(dataSourceInfo);
@@ -51,7 +52,7 @@ const Wizard = (props) => {
                 payload: `Invalid adaptable configuration - ${err}`,
             });
         }
-        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo, (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
         adaptableOptions.gridOptions = gridOptions;

package/src/View/AdaptableWizardView/helper.d.ts

@@ -16,4 +16,4 @@ export interface WizardDataSourceInfo {
  */
 export declare const prepareDataSource: (json: any, _file?: File) => WizardDataSourceInfo;
 export declare const getColTypeFromValue: (value: any) => string;
-export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo) => GridOptions;
+export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo, defaultGridOptions: Partial<GridOptions>) => GridOptions;

package/src/View/AdaptableWizardView/helper.js

@@ -65,7 +65,7 @@ const getColTypeFromValue = (value) => {
     return columnType;
 };
 exports.getColTypeFromValue = getColTypeFromValue;
-const prepareGridOptions = (dataSourceInfo) => {
+const prepareGridOptions = (dataSourceInfo, defaultGridOptions) => {
     const firstItem = dataSourceInfo.data[0];
     const columnDefs = dataSourceInfo.columns.map((columnName) => {
         const firstItemValue = firstItem[columnName];
@@ -81,16 +81,9 @@ const prepareGridOptions = (dataSourceInfo) => {
             editable: true,
         };
     });
-    const gridOptions = {
-        defaultColDef: {
+    const gridOptions = Object.assign(Object.assign({}, defaultGridOptions), { defaultColDef: {
             floatingFilter: true,
-        },
-        rowData: dataSourceInfo.data,
-        columnDefs,
-        enableRangeSelection: true,
-        rowSelection: 'multiple',
-        rowHeight: 30,
-    };
+        }, rowData: dataSourceInfo.data, columnDefs, enableRangeSelection: true, rowSelection: 'multiple', rowHeight: 30 });
     return gridOptions;
 };
 exports.prepareGridOptions = prepareGridOptions;

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingTags.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCalculatedColumnSettingTags = void 0;
 const getCalculatedColumnSettingTags = (settings) => {
     const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings !== null && settings !== void 0 ? settings : {};
+    const colTypes = (settings === null || settings === void 0 ? void 0 : settings.ColumnTypes) ? settings.ColumnTypes.join(', ') : '';
     return [
         DataType ? `DataType: ${DataType}` : null,
         Width ? `Width: ${Width}px` : null,
@@ -12,6 +13,7 @@ const getCalculatedColumnSettingTags = (settings) => {
         Groupable ? 'Groupable' : null,
         Sortable ? 'Sortable' : null,
         Aggregatable ? 'Aggregatable' : null,
+        colTypes ? `Column Types: ${colTypes}` : null,
     ].filter(Boolean);
 };
 exports.getCalculatedColumnSettingTags = getCalculatedColumnSettingTags;

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

@@ -66,10 +66,7 @@ const CalculatedColumnExpressionWizardSection = (props) => {
     const setCalculatedColumnExpression = (calculatedColumnQuery) => {
         const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
         const dataType = calculatedColumnExpressionService.getCalculatedColumnDataType(calculatedColumnQuery);
-        const Pivotable = dataType == 'String';
-        const Aggregatable = dataType == 'Number';
-        props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Pivotable,
-                Aggregatable }) }));
+        props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType }) }));
     };
     return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
         React.createElement(QueryTab, { value: "ScalarExpression", type: type, label: "Scalar" }),

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

@@ -37,7 +37,7 @@ const isValidCalculatedColumnSettings = (data, api) => {
         return 'Column Id cannot be empty';
     }
     if (!((_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.DataType)) {
-        return 'No data type specified for column';
+        return 'No data type is specified and it could not be inferred from the defined expression';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;

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

@@ -29,7 +29,7 @@ const CalculatedColumnWizard = (props) => {
                 return calculatedColumn;
             }
         }
-        return ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns);
+        return ObjectFactory_1.default.CreateEmptyCalculatedColumn();
     });
     const dispatch = react_redux_1.useDispatch();
     const isEdit = Boolean(props.data) || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
@@ -43,15 +43,6 @@ const CalculatedColumnWizard = (props) => {
         props.onCloseWizard();
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
-            {
-                title: 'Expression',
-                details: 'Specify the Calculated Column Expression',
-                isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
-                renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
-                render: () => {
-                    return React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { onChange: setCalculatedColumn });
-                },
-            },
             {
                 title: 'Settings',
                 details: 'Specify Column details and properties',
@@ -62,6 +53,15 @@ const CalculatedColumnWizard = (props) => {
                         React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
+            {
+                title: 'Expression',
+                details: 'Specify the Calculated Column Expression',
+                isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
+                renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
+                render: () => {
+                    return React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { onChange: setCalculatedColumn });
+                },
+            },
             {
                 details: 'Select Calculated Column tags',
                 title: 'Tags',

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

@@ -21,7 +21,7 @@ const AdaptableDateInput = React.forwardRef((props, ref) => {
             });
         },
     });
-    const dateValue = DateHelper_1.parseFilterInputDate(value);
+    const dateValue = value ? DateHelper_1.parseDateValue(value) : null;
     const datepickerProps = Object.assign({ 
         // this is OK as long as we do not support range datepicker
         value: dateValue, onChange: (dateValue) => { var _a; 

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

@@ -110,7 +110,8 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+            .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (!this._isMounted) {
             return;
         }
@@ -210,7 +211,8 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.onClearColumnFilter(editedColumnFilter);
+            this.props.api.filterApi.clearColumnFilterByColumn(editedColumnFilter.ColumnId);
+            this.onCloseForm();
         }
         else {
             if (this.props.api.internalApi.getAdaptableOptions().filterOptions.autoApplyFilter) {

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

@@ -32,7 +32,8 @@ class QuickFilterFormComponent extends React.Component {
             }
         };
         this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+                .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
             if (!this._isMounted) {
                 return;
             }

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -49,8 +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() {
-        const specialColumnsAreFilterable = this.props.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns;
-        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn(specialColumnsAreFilterable);
+        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn();
         configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({
             editedAdaptableObject: configEntity,

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

@@ -2,7 +2,7 @@
 import { FreeTextColumn } from '../../../PredefinedConfig/FreeTextColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => JSX.Element;
-export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "Column Id cannot be empty" | "No data type specified for column" | "A Column already exists with that id";
+export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "Column Id cannot be empty" | "A Column already exists with that id" | "No data type specified for column";
 export declare type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;

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

@@ -23,7 +23,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(false);
+        return ObjectFactory_1.default.CreateEmptyFreeTextColumn();
     });
     const dispatch = react_redux_1.useDispatch();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';

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

@@ -18,16 +18,16 @@ const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const ColumnLabels_1 = require("../LayoutEditor/ColumnLabels");
 const Utilities_1 = require("./Utilities");
-const lodash_1 = require("lodash");
 const icons_1 = require("../../../../components/icons");
 const CheckBox_1 = require("../../../../components/CheckBox");
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
 const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const ColumnsSectionSummary = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + lodash_1.clamp(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + Helper_1.clamp(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

package/src/agGrid/Adaptable.d.ts

@@ -76,6 +76,7 @@ export declare class Adaptable implements IAdaptable {
     private currentColumnDefs?;
     private rowListeners;
     private isCheckedColumnDataType;
+    get isLive(): boolean;
     _on: (eventName: string, callback: EmitterCallback) => (() => void);
     _onIncludeFired: (eventName: string, callback: EmitterCallback) => (() => void);
     _emit: (eventName: string, data?: any) => Promise<any>;
@@ -209,6 +210,7 @@ export declare class Adaptable implements IAdaptable {
     selectCells(columnIds: string[], startNode: RowNode, endNode: RowNode): void;
     isRowNodeVisible(rowNode: RowNode): boolean;
     redrawBody(): void;
+    redrawRenderedRows(): void;
     redrawHeader(): void;
     redrawRow(rowNode: RowNode): void;
     redrawRows(rowNodes: RowNode[]): void;

package/src/agGrid/Adaptable.js

@@ -266,6 +266,9 @@ class Adaptable {
         };
         // (global as any).adaptable = this;
     }
+    get isLive() {
+        return this.isInitialised && !this.isDestroyed;
+    }
     static init(adaptableOptions) {
         return Adaptable.initInternal(adaptableOptions);
     }
@@ -392,7 +395,7 @@ class Adaptable {
         this.AlertService = new AlertService_1.AlertService(this.api);
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
         this.RowEditService = new RowEditService_1.RowEditService(this.api);
-        this.MetamodelService = new MetamodelService_1.MetamodelService(this.api);
+        this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.internalApi.getAdaptableOptions());
         this.forPlugins((plugin) => plugin.afterInitServices(this));
         // Set up Modules - we set up all the Modules suitable for AG Grid
         // But users can make some hidden or readonly in their entitlements
@@ -542,7 +545,7 @@ class Adaptable {
         });
     }
     performAudit(action, oldState, newState) {
-        if (this.isInitialised) {
+        if (this.isLive) {
             const adaptableStateChangedInfo = {
                 adaptableApi: this.api,
                 actionName: action.type,
@@ -1395,6 +1398,9 @@ class Adaptable {
             shouldUpdateHeaders = this.setupColumnHeader(colSetupInfo) || shouldUpdateHeaders;
         });
         isChanged = isChanged || shouldUpdateHeaders;
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ColumnFilters)) {
+            this.gridOptions.api.onFilterChanged();
+        }
         if (isChanged) {
             // it's important we set pivot mode
             // before we set column state
@@ -1717,7 +1723,7 @@ class Adaptable {
             const filterPermittedValuesParams = {
                 adaptableApi: this.api,
                 column: column,
-                filter: filter,
+                searchFilter: filter,
             };
             preparedPermittedValues = await (permittedValues === null || permittedValues === void 0 ? void 0 : permittedValues.values(filterPermittedValuesParams));
         }
@@ -1942,7 +1948,10 @@ class Adaptable {
             return typeof rawValue !== 'string' ? String(rawValue) : rawValue;
         }
         if (dataType === 'Number') {
-            return typeof rawValue !== 'number' ? Number(rawValue) : rawValue;
+            // empty string or space should not be converted to 0
+            return typeof rawValue !== 'number' && StringExtensions_1.StringExtensions.IsNumeric(rawValue)
+                ? Number(rawValue)
+                : rawValue;
         }
         if (dataType === 'Boolean') {
             return typeof rawValue !== 'boolean' ? Boolean(rawValue) : rawValue;
@@ -2074,6 +2083,9 @@ class Adaptable {
         this.gridOptions.api.redrawRows();
         this._emit('GridRefreshed');
     }
+    redrawRenderedRows() {
+        this.redrawRows(this.gridOptions.api.getRenderedNodes());
+    }
     redrawHeader() {
         this.gridOptions.api.refreshHeader();
     }
@@ -2124,8 +2136,7 @@ class Adaptable {
         ];
     }
     getColDefsForFreeTextColumns() {
-        const specialColumnsAreFilterable = this.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns;
-        const defaultFreeTextColumnSettings = ObjectFactory_1.CreateEmptyFreeTextColumn(specialColumnsAreFilterable).FreeTextColumnSettings;
+        const defaultFreeTextColumnSettings = ObjectFactory_1.CreateEmptyFreeTextColumn().FreeTextColumnSettings;
         return this.api.freeTextColumnApi.getAllFreeTextColumn().map((freeTextColumn) => {
             var _a;
             const freeTextColumnSettings = Object.assign(Object.assign({}, defaultFreeTextColumnSettings), freeTextColumn.FreeTextColumnSettings);
@@ -2400,11 +2411,7 @@ class Adaptable {
         // !! it is important to NOT set the columns visible again as this is already taken care of in the next performed method (this.updateColDefsForSpecialColumns())
     }
     getColDefsForCalculatedColumns() {
-        const specialColumnsAreFilterable = this.adaptableOptions.filterOptions
-            .enableFilterOnSpecialColumns
-            ? this.adaptableOptions.filterOptions.enableFilterOnSpecialColumns
-            : true;
-        const defaultCalculatedColumnSettings = ObjectFactory_1.CreateEmptyCalculatedColumn(specialColumnsAreFilterable).CalculatedColumnSettings;
+        const defaultCalculatedColumnSettings = ObjectFactory_1.CreateEmptyCalculatedColumn().CalculatedColumnSettings;
         const isExternalEvaluation = !this.api.internalApi.runModuleInAdaptableQL('CalculatedColumn');
         return this.api.calculatedColumnApi.getAllCalculatedColumn().map((calculatedColumn) => {
             const calculatedColumnSettings = Object.assign(Object.assign({}, defaultCalculatedColumnSettings), calculatedColumn.CalculatedColumnSettings);