@adaptabletools/adaptable 20.3.0 → 21.0.0-canary.1

package/src/Utilities/Extensions/ArrayExtensions.js

@@ -114,7 +114,42 @@ export function areArraysEqualWithOrder(arr1, arr2) {
     }
     return arr1.every((x, index) => arr2.indexOf(x) == index);
 }
-export function areArraysEqualWithOrderandProperties(value, other) {
+/**
+ * Checks if two arrays contain the same elements (order-independent).
+ *
+ * @param arr1 First array to compare
+ * @param arr2 Second array to compare
+ * @param equalityFn Optional function to determine if two elements are equal
+ * @returns True if arrays contain the same elements, false otherwise
+ */
+export function areArraysEqualWithCustomComparator(arr1, arr2, equalityFn) {
+    // Handle null/undefined cases
+    if (!arr1 && !arr2) {
+        return true;
+    }
+    if (!arr1 || !arr2) {
+        return false;
+    }
+    // Check length
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+    // Use default equality comparison if no custom function provided
+    const compareElements = equalityFn || ((a, b) => a === b);
+    // For each element in arr1, find a matching element in arr2
+    const arr2Copy = [...arr2];
+    for (let i = 0; i < arr1.length; i++) {
+        const element = arr1[i];
+        const matchIndex = arr2Copy.findIndex((el) => compareElements(element, el));
+        if (matchIndex === -1) {
+            return false;
+        }
+        // Remove the matched element to prevent duplicate matches
+        arr2Copy.splice(matchIndex, 1);
+    }
+    return true;
+}
+export function areArraysEqualWithOrderAndProperties(value, other) {
     const type = Object.prototype.toString.call(value);
     // If the two objects are not the same type, return false
     if (type !== Object.prototype.toString.call(other)) {
@@ -136,7 +171,7 @@ export function areArraysEqualWithOrderandProperties(value, other) {
         const itemType = Object.prototype.toString.call(item1);
         // If an object or array, compare recursively
         if (['[object Array]', '[object Object]'].indexOf(itemType) >= 0) {
-            if (!areArraysEqualWithOrderandProperties(item1, item2)) {
+            if (!areArraysEqualWithOrderAndProperties(item1, item2)) {
                 return false;
             }
         }
@@ -211,15 +246,20 @@ export function sortArray(values, sortOrder = SortOrder.Asc) {
     const direction = sortOrder == SortOrder.Asc ? 1 : -1;
     return newValues.sort((a, b) => (a < b ? -1 * direction : a > b ? 1 * direction : 0));
 }
+export const getGenericComparatorForGridCell = (sortOrder) => {
+    const direction = sortOrder == SortOrder.Asc ? 1 : -1;
+    return (a, b) => {
+        return a.rawValue < b.rawValue ? -1 * direction : a.rawValue > b.rawValue ? 1 * direction : 0;
+    };
+};
 export function sortCellValueArray(cellValues, sortOrder = SortOrder.Asc) {
     const newValues = [].concat(cellValues);
-    const direction = sortOrder == SortOrder.Asc ? 1 : -1;
-    return newValues.sort((a, b) => a.rawValue < b.rawValue ? -1 * direction : a.rawValue > b.rawValue ? 1 * direction : 0);
+    const comparator = getGenericComparatorForGridCell(sortOrder);
+    return newValues.sort(comparator);
 }
-export function sortCellValueArrayNumeric(cellValues, sortOrder = SortOrder.Asc) {
+export const getNumericComparatorForGridCell = (sortOrder) => {
     const direction = sortOrder == SortOrder.Asc ? 1 : -1;
-    const newValues = [].concat(cellValues);
-    return newValues.sort((a, b) => {
+    return (a, b) => {
         const valueAAsNumber = Number(a.rawValue);
         const valueBAsNumber = Number(b.rawValue);
         if (isNaN(valueAAsNumber)) {
@@ -233,15 +273,23 @@ export function sortCellValueArrayNumeric(cellValues, sortOrder = SortOrder.Asc)
             : valueAAsNumber > valueBAsNumber
                 ? 1 * direction
                 : 0;
-    });
+    };
+};
+export function sortCellValueArrayNumeric(cellValues, sortOrder = SortOrder.Asc) {
+    const newValues = [].concat(cellValues);
+    const comparator = getNumericComparatorForGridCell(sortOrder);
+    return newValues.sort(comparator);
 }
-export function sortCellValueArrayDates(cellValues, sortOrder = SortOrder.Asc) {
-    cellValues.sort((a, b) => {
+export const getDateComparatorForGridCell = (sortOrder) => {
+    return (a, b) => {
         return sortOrder == SortOrder.Asc
             ? +new Date(a.rawValue) - +new Date(b.rawValue)
             : +new Date(b.rawValue) - +new Date(a.rawValue);
-    });
-    return cellValues;
+    };
+};
+export function sortCellValueArrayDates(cellValues, sortOrder = SortOrder.Asc) {
+    const comparator = getDateComparatorForGridCell(sortOrder);
+    return [].concat(cellValues).sort(comparator);
 }
 export function groupArrayBy(array, prop) {
     return array.reduce((acc, item) => {
@@ -346,7 +394,8 @@ export const ArrayExtensions = {
     areArraysEqual,
     areArraysNotEqual,
     areArraysEqualWithOrder,
-    areArraysEqualWithOrderandProperties,
+    areArraysEqualWithOrderAndProperties,
+    areArraysEqualWithCustomComparator,
     sortArray,
     sortCellValueArray,
     sortCellValueArrayNumeric,

package/src/Utilities/Helpers/AdaptableHelper.d.ts

@@ -14,6 +14,7 @@ export declare const AdaptableHelper: {
     addAdaptableObjectPrimitives: typeof addAdaptableObjectPrimitives;
     removeAdaptableObjectPrimitives: typeof removeAdaptableObjectPrimitives;
     removeAdaptableObjectPrimitivesInline: typeof removeAdaptableObjectPrimitivesInline;
+    removeAdaptableObjectPrimitivesInlineDeep: typeof removeAdaptableObjectPrimitivesInlineDeep;
     isAdaptableObject: typeof isAdaptableObject;
 };
 export default AdaptableHelper;

package/src/Utilities/Helpers/AdaptableHelper.js

@@ -106,6 +106,7 @@ export const AdaptableHelper = {
     addAdaptableObjectPrimitives,
     removeAdaptableObjectPrimitives,
     removeAdaptableObjectPrimitivesInline,
+    removeAdaptableObjectPrimitivesInlineDeep,
     isAdaptableObject,
 };
 export default AdaptableHelper;

package/src/Utilities/ObjectFactory.d.ts

@@ -23,7 +23,7 @@ import { NotificationsOptions } from '../AdaptableOptions/NotificationsOptions';
 import { CellSummmaryInfo } from '../AdaptableState/Common/CellSummary';
 import { AdaptableTheme, ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
 import { IRowNode } from 'ag-grid-enterprise';
-import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout } from '../../types';
+import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout, TableLayout } from '../../types';
 import { ToastOptions } from '../components/Toastify';
 import { StyledColumn } from '../AdaptableState/StyledColumnState';
 export declare function CreateEmptyCustomSort(): CustomSort;
@@ -51,12 +51,15 @@ export declare function CreateEmptySchedule(): Schedule;
 export declare function CreateEmptyShortcut(): Shortcut;
 export declare function CreateEmptyFormatColumn(): FormatColumn;
 export declare function CreateEmptyFreeTextColumn(defaultSpecialColumnSettings: Partial<SpecialColumnSettings>): FreeTextColumn;
-export declare function CreateEmptyPivotLayout(layout?: Partial<PivotLayout> & {
+export declare function CreateEmptyPivotLayout(pivotLayout?: Partial<PivotLayout> & {
     Name: string;
 }): PivotLayout;
+export declare function CreateEmptyTableLayout(tableLayout?: Partial<TableLayout> & {
+    Name: string;
+}): TableLayout;
 export declare function CreateEmptyLayout(layout?: Partial<Layout> & {
     Name: string;
-}, adaptableColumns?: AdaptableColumn[]): Layout;
+}): Layout;
 export declare function CreateEmptyStyle(): AdaptableStyle;
 export declare function CreateSystemStatusMessageInfo(message: string, type: AdaptableMessageType, furtherInfo?: string): SystemStatusMessageInfo;
 export declare function CreateEmptyCellSummmary(): CellSummmaryInfo;
@@ -100,6 +103,7 @@ export declare const ObjectFactory: {
     CreateEmptyFreeTextColumn: typeof CreateEmptyFreeTextColumn;
     CreateEmptyLayout: typeof CreateEmptyLayout;
     CreateEmptyPivotLayout: typeof CreateEmptyPivotLayout;
+    CreateEmptyTableLayout: typeof CreateEmptyTableLayout;
     CreateColumnFilter: typeof CreateColumnFilter;
     CreateEmptyStyle: typeof CreateEmptyStyle;
     CreateEmptyCellSummmary: typeof CreateEmptyCellSummmary;

package/src/Utilities/ObjectFactory.js

@@ -230,7 +230,7 @@ export function CreateEmptyFormatColumn() {
         DisplayFormat: undefined,
         CellAlignment: undefined,
         RowScope: undefined,
-        Target: 'cell'
+        Target: 'cell',
     };
 }
 export function CreateEmptyFreeTextColumn(defaultSpecialColumnSettings) {
@@ -246,36 +246,43 @@ export function CreateEmptyFreeTextColumn(defaultSpecialColumnSettings) {
         },
     };
 }
-export function CreateEmptyPivotLayout(layout) {
+export function CreateEmptyPivotLayout(pivotLayout) {
     const result = {
-        Name: layout.Name,
-        ColumnSorts: layout.ColumnSorts || [],
-        ColumnFilters: layout.ColumnFilters || [],
+        ...pivotLayout,
         Uuid: createUuid(),
-        PivotColumns: layout.PivotColumns || [],
-        PivotAggregationColumns: layout.PivotAggregationColumns || [],
-        PivotGroupedColumns: layout.PivotGroupedColumns || [],
-        ColumnWidths: layout.ColumnWidths || {},
+        ColumnSizing: pivotLayout.ColumnSizing || {},
+        ColumnHeaders: pivotLayout.ColumnHeaders || {},
+        ColumnPinning: pivotLayout.ColumnPinning || {},
+        ColumnSorts: pivotLayout.ColumnSorts || [],
+        ColumnFilters: pivotLayout.ColumnFilters || [],
+        PivotColumns: pivotLayout.PivotColumns || [],
+        PivotAggregationColumns: pivotLayout.PivotAggregationColumns || [],
+        PivotGroupedColumns: pivotLayout.PivotGroupedColumns || [],
     };
     return result;
 }
-export function CreateEmptyLayout(layout, adaptableColumns) {
-    if (isPivotLayout(layout)) {
-        return CreateEmptyPivotLayout(layout);
-    }
-    const tableLayout = layout;
+export function CreateEmptyTableLayout(tableLayout) {
     const result = {
         ...tableLayout,
         Uuid: createUuid(),
-        TableColumns: tableLayout.TableColumns || [],
+        ColumnSizing: tableLayout.ColumnSizing || {},
+        ColumnHeaders: tableLayout.ColumnHeaders || {},
+        ColumnPinning: tableLayout.ColumnPinning || {},
         ColumnSorts: tableLayout.ColumnSorts || [],
         ColumnFilters: tableLayout.ColumnFilters || [],
-        ColumnWidths: tableLayout.ColumnWidths || {},
-        RowGroupedColumns: tableLayout.RowGroupedColumns ||
-            (adaptableColumns ? adaptableColumns.filter((c) => c.isGrouped).map((c) => c.columnId) : []),
+        TableColumns: tableLayout.TableColumns || [],
+        RowGroupedColumns: tableLayout.RowGroupedColumns || [],
     };
     return result;
 }
+export function CreateEmptyLayout(layout) {
+    if (isPivotLayout(layout)) {
+        return CreateEmptyPivotLayout(layout);
+    }
+    else {
+        return CreateEmptyTableLayout(layout);
+    }
+}
 export function CreateEmptyStyle() {
     return {
         BackColor: undefined,
@@ -444,6 +451,7 @@ export const ObjectFactory = {
     CreateEmptyFreeTextColumn,
     CreateEmptyLayout,
     CreateEmptyPivotLayout,
+    CreateEmptyTableLayout,
     CreateColumnFilter,
     CreateEmptyStyle,
     CreateEmptyCellSummmary,

package/src/Utilities/Services/AnnotationsService.js

@@ -41,7 +41,7 @@ export class AnnotationsService {
     shouldListenToEvents() {
         // Listen to events if we either have Notes in state or if Comments have been set up
         return (ArrayExtensions.IsNotNullOrEmpty(this.api.noteApi.getAllNotes()) ||
-            this.api.internalApi.getModuleService().isModuleAvailable('Comment'));
+            this.api.internalApi.getModuleService().isAdapTableModulePresent('Comment'));
     }
     setUpEventListeners() {
         this.adaptable._on('MouseEnter', (event) => this.handleMouseEnter(event));

package/src/Utilities/Services/Interface/IModuleService.d.ts

@@ -4,7 +4,8 @@ import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject'
 import { IAdaptableService } from './IAdaptableService';
 import { AdaptableModule } from '../../../AdaptableState/Common/Types';
 export interface IModuleService extends IAdaptableService {
-    isModuleAvailable(adaptableModule: AdaptableModule): boolean;
+    logMissingAgGridDepsInfos(): void;
+    isAdapTableModulePresent(adaptableModule: AdaptableModule): boolean;
     isModuleEditable(adaptableModule: AdaptableModule): boolean;
     createModuleUIItems(): void;
     getTeamSharingAction(adaptableModule: AdaptableModule): TeamSharingImportInfo<AdaptableObject> | undefined;

package/src/Utilities/Services/ModuleService.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableModule } from '../../types';
-import { IModule, ModuleInfo, IModuleCollection } from '../../Strategy/Interface/IModule';
+import { IModule, IModuleCollection, ModuleInfo } from '../../Strategy/Interface/IModule';
 import { TeamSharingImportInfo } from '../../AdaptableState/TeamSharingState';
 import { AdaptableObject } from '../../AdaptableState/Common/AdaptableObject';
 import { IModuleService } from './Interface/IModuleService';
@@ -7,9 +7,9 @@ import { AdaptableApi } from '../../../types';
 export declare class ModuleService implements IModuleService {
     private adaptableApi;
     constructor(adaptableApi: AdaptableApi);
-    isModuleAvailable(adaptableModule: AdaptableModule): boolean;
-    isModuleName(adaptableModule: string): adaptableModule is AdaptableModule;
+    isAdapTableModulePresent(adaptableModule: AdaptableModule): boolean;
     isModuleEditable(adaptableModule: AdaptableModule): boolean;
+    logMissingAgGridDepsInfos(): void;
     getModuleFriendlyName(adaptableModule: AdaptableModule): string;
     createModuleUIItems(): void;
     private createSettingsPanelItems;

package/src/Utilities/Services/ModuleService.js

@@ -1,20 +1,16 @@
 import Helper from '../Helpers/Helper';
-import { HOST_URL_DOCS } from '../Constants/DocumentationLinkConstants';
-import { ALL_MODULES } from '../../AdaptableState/Common/Types';
+import { AgGridRequiredModulesDocsLink, HOST_URL_DOCS, } from '../Constants/DocumentationLinkConstants';
 export class ModuleService {
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;
     }
-    isModuleAvailable(adaptableModule) {
+    isAdapTableModulePresent(adaptableModule) {
         let module = this.getModuleCollection().get(adaptableModule);
         if (!module) {
             return false;
         }
-        return module.isModuleAvailable();
-    }
-    isModuleName(adaptableModule) {
-        return ALL_MODULES.includes(adaptableModule);
+        return module.isModuleVisible();
     }
     isModuleEditable(adaptableModule) {
         let module = this.getModuleCollection().get(adaptableModule);
@@ -23,6 +19,22 @@ export class ModuleService {
         }
         return module.isModuleEditable();
     }
+    logMissingAgGridDepsInfos() {
+        // log missing core (required) AG Grid dependencies
+        const agGridModulesAdapter = this.adaptableApi.internalApi.getAgGridModulesAdapter();
+        const mandatoryAgGridModuleNames = agGridModulesAdapter.getMandatoryAgGridModuleNames();
+        const registeredAgGridModuleNames = agGridModulesAdapter.getAgGridRegisteredModuleNames();
+        const missingAgGridModuleNames = mandatoryAgGridModuleNames.filter((moduleName) => !registeredAgGridModuleNames.includes(moduleName));
+        if (missingAgGridModuleNames.length) {
+            this.adaptableApi.consoleError(`AdapTable requires the following AG Grid modules to be registered: ${missingAgGridModuleNames.join(', ')}.
+
+        See for more information: ${AgGridRequiredModulesDocsLink}`);
+        }
+        // log optional missing AG Grid dependencies for all modules
+        this.getModuleCollection().forEach((adaptableModule) => {
+            adaptableModule.logMissingAgGridDepsInfos();
+        });
+    }
     getModuleFriendlyName(adaptableModule) {
         return this.getModuleInfoByModule(adaptableModule)?.FriendlyName ?? adaptableModule;
     }

package/src/View/AdaptableView.js

@@ -20,7 +20,9 @@ class AdaptableView extends React.Component {
         return (React.createElement("div", null,
             React.createElement(GridCellPopup, null),
             React.createElement(QuickSearchDrawer, null),
-            this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard, { api: this.props.AdaptableApi })),
+            this.props.AdaptableApi.internalApi
+                .getModuleService()
+                .isAdapTableModulePresent('Dashboard') && React.createElement(Dashboard, { api: this.props.AdaptableApi }),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             Boolean(this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup) && (React.createElement(AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi })),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),

package/src/View/ColumnInfo/ColumnInfo.js

@@ -40,6 +40,8 @@ const MODULES_WITH_SCOPE = [
 const ColumnDefPreview = (props) => {
     const adaptable = useAdaptable();
     if (props.column) {
+        const api = adaptable.api;
+        const summary = api.columnApi.getColumnSummaryForColumnId(props.column.columnId);
         const keyValuePairs = [
             {
                 Key: 'Column Id',
@@ -112,7 +114,7 @@ const ColumnDefPreview = (props) => {
             {
                 Key: 'Column Filter',
                 Value: props.column.filterable
-                    ? adaptable.api.filterApi.columnFilterApi.columnFilterToString(adaptable.api.filterApi.columnFilterApi.getColumnFilterForColumn(props.column.columnId))
+                    ? api.filterApi.columnFilterApi.columnFilterToString(summary.columnFilter)
                     : 'Ignore',
             },
             {
@@ -143,6 +145,10 @@ const ColumnDefPreview = (props) => {
                 Key: 'Sortable',
                 Value: props.column.sortable ? 'Yes' : 'No',
             },
+            {
+                Key: 'No. Distinct Values',
+                Value: summary.uniqueGridCells.length,
+            },
         ]
             .map((keyValuePair) => {
             return {
@@ -162,7 +168,7 @@ const ColumnDefPreview = (props) => {
 const ModuleView = (props) => {
     const adaptable = useAdaptable();
     const module = adaptable.ModuleService.getModuleById(props.moduleName);
-    if (!module || !module.isModuleAvailable()) {
+    if (!module?.isModuleVisible()) {
         return null;
     }
     const moduleInfo = module.moduleInfo;
@@ -213,7 +219,7 @@ export const ColumnInfo = (props) => {
         React.createElement(Box, { mb: 3 },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector, { filterColumn: (column) => !column.alwaysHidden, value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
+                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
         selectedColumnId && (React.createElement(Tabs, { mb: 3 },
             React.createElement(Tabs.Tab, null, "Column Summary"),
             React.createElement(Tabs.Tab, null, "Column State"),

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

@@ -6,7 +6,6 @@ import { useAdaptable } from '../../AdaptableContext';
  */
 export const AdaptableIconSelector = (props) => {
     const adaptable = useAdaptable();
-    const userInterfaceOptions = adaptable.api.optionsApi.getAdaptableOptions()?.userInterfaceOptions;
-    const customDefinedIcons = userInterfaceOptions.customIcons ?? [];
-    return React.createElement(IconSelector, { customIcons: customDefinedIcons, ...props });
+    const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
+    return React.createElement(IconSelector, { customIcons: customIcons, ...props });
 };

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.d.ts

@@ -4,7 +4,6 @@ export interface AdaptableColumnFilterProps {
     columnId: string;
     padding?: BoxProps['p'];
     wrapperProps?: BoxProps;
-    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.js

@@ -6,9 +6,8 @@ import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
  * It transforms predicates in QlPredicates.
  */
 export const AdaptableColumnFilter = (props) => {
-    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId);
+    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId, 'FilterForm');
     return (React.createElement(ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
             handlePredicateChange(predicate);
-            props.onChange?.();
-        }, [handlePredicateChange, props.onChange]) }));
+        }, [handlePredicateChange]) }));
 };

package/src/View/Components/ColumnFilter/AdaptableFloatingFilter.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
 export interface AdaptableColumnFilterProps extends ColumnFilterProps {
-    onClear?: () => void;
-    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

package/src/View/Components/ColumnFilter/AdaptableFloatingFilter.js

@@ -8,15 +8,13 @@ import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
  */
 export const AdaptableFloatingFilter = (props) => {
     const adaptable = useAdaptable();
-    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId);
+    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId, 'FilterBar');
     const onClear = React.useCallback(() => {
         handleClear();
-        props.onClear?.();
-    }, [handleClear, props.onClear]);
+    }, [handleClear]);
     const onPredicateChange = React.useCallback((newPredicate) => {
         handlePredicateChange(newPredicate);
-        props.onChange?.();
-    }, [handlePredicateChange, props.onChange]);
+    }, [handlePredicateChange]);
     if (!column) {
         return null;
     }
@@ -32,7 +30,6 @@ export const AdaptableFloatingFilter = (props) => {
                         Inputs: [],
                     },
                 ]);
-                props.onChange?.();
             }
-        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange, onChange: props.onChange }));
+        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange }));
 };

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

@@ -62,7 +62,7 @@ const AndOrInput = (props) => {
 };
 export const ColumnFilterComponent = (props) => {
     const adaptable = useAdaptable();
-    const autoApplyColumnFilter = adaptable.adaptableOptions.filterOptions.columnFilterOptions?.autoApplyColumnFilter ?? true;
+    const autoApplyColumnFilter = adaptable.api.filterApi.columnFilterApi.internalApi.shouldAutoApplyColumnFilter(props.columnId);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -116,7 +116,7 @@ export const ColumnFilterComponent = (props) => {
             React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
             React.createElement(SimpleButton, { ml: 2, onClick: () => onPredicateChange(null) }, "Clear All")),
         React.createElement(Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
-            React.createElement(Box, { flex: 1, style: { overflow: 'auto' } },
+            React.createElement(Box, { style: { overflow: 'auto' } },
                 currentPredicate.args.map((predicate, index) => {
                     return (React.createElement(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
                             const currentPredicate = currentPredicateRef.current;
@@ -141,6 +141,13 @@ export const ColumnFilterComponent = (props) => {
                         } }));
                 }),
                 isLastPredicateValid && filterPredicateDropdown),
-            !autoApplyColumnFilter ? (React.createElement(Box, { pt: 2 },
-                React.createElement(SimpleButton, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter"))) : null)));
+            !autoApplyColumnFilter ? (React.createElement(React.Fragment, null,
+                React.createElement(Box, { flex: 1, "data-name": "spacer" }),
+                React.createElement(Flex, { pt: 2, className: "ab-ColumnFilter-actions", justifyContent: "space-between" },
+                    React.createElement(Box, { className: "ab-ColumnFilter-action-apply" },
+                        React.createElement(SimpleButton, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter")),
+                    React.createElement(Box, { className: "ab-ColumnFilter-action-reset" },
+                        React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => {
+                                setPredicateNotYetApplied(props.predicate);
+                            } }, "Reset Filter"))))) : null)));
 };

package/src/View/Components/ColumnFilter/ColumnFilterWindow.js

@@ -29,5 +29,5 @@ export const ColumnFilterWindow = (props) => {
                             }
                             return label;
                         }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
-        React.createElement(AdaptableColumnFilter, { columnId: columnId, onChange: onChange })));
+        React.createElement(AdaptableColumnFilter, { columnId: columnId })));
 };

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -9,13 +9,12 @@ import { FloatingFilterInputList } from './components/FloatingFilterInputList';
 import { isPredicateEmpty, qlPredicateToString } from './utils';
 export const FloatingFilter = (props) => {
     const adaptable = useAdaptable();
-    const columnFilterOptions = adaptable.adaptableOptions.filterOptions.columnFilterOptions;
     /**
      * We always have a syntetic predicate with AND or OR, so the logic is easyer.
      * The wrapper is in charge of constructing the correct column filter.
      */
     const isMultiple = props.predicate?.args?.length > 1;
-    const isManualApply = !columnFilterOptions.autoApplyColumnFilter;
+    const isManualApply = !adaptable.api.filterApi.columnFilterApi.internalApi.shouldAutoApplyColumnFilter(props.columnId);
     const isInlineEditable = !isMultiple && !isManualApply;
     // only used when there is only one filter selected
     let singleFilterPredicateDef = null;

package/src/View/Components/ColumnFilter/LayoutColumnFilter.js

@@ -10,7 +10,7 @@ export const LayoutColumnFilter = (props) => {
     const predicateDefs = api.filterApi.columnFilterApi.getFilterPredicateDefsForColumn(column);
     const qlDataType = mapColumnDataTypeToExpressionFunctionType(column.dataType);
     const qlPredicateDefs = predicateDefs.map((predDef) => mapAdaptablePredicateDefToQlPredicateDef(predDef, qlDataType));
-    const qlPredicate = mapColumnFilterToQlPredicate(props.columnFilter, column, qlPredicateDefs, columnFilterOptions, api);
+    const qlPredicate = mapColumnFilterToQlPredicate(props.columnFilter, column, qlPredicateDefs, columnFilterOptions, 'FilterForm', api);
     const handlePredicateChange = (newPredicate) => {
         const newAdaptablePredicates = newPredicate.args.map(mapQlPredicateToAdaptablePredicate);
         const newFilter = {

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

@@ -70,7 +70,7 @@ export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput, { value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (React.createElement(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
                 onChange(value);
                 setLiveValue(value);
             } }));
@@ -96,7 +96,7 @@ export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear
                 borderRadius: 0,
                 border: 'none',
             }
-            : {}, onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
+            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
         // autoFocus has to be FALSE because if the input receives focus in the init phase,
         // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
         autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, onChange: (e) => {

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

@@ -33,8 +33,8 @@ export function useDistinctFilterColumnValues(options) {
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
         let searchValueUsedInFilterValue = false;
-        api.gridApi.internalApi
-            .getDistinctFilterDisplayValuesForColumn({
+        api.filterApi.columnFilterApi.internalApi
+            .getColumnFilterValues({
             columnId,
             get currentSearchValue() {
                 searchValueUsedInFilterValue = true;

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.d.ts

@@ -1,7 +1,7 @@
 import { QlLogicalOperator, QlPredicate } from '../../../parser/src/predicate';
 import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
 import { AdaptablePredicate, ColumnFilter } from '../../../types';
-export declare const useAdaptableFilterWrapper: (columnId: string, handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
+export declare const useAdaptableFilterWrapper: (columnId: string, filterComponent: 'FilterBar' | 'FilterForm', handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
     qlPredicate: QlPredicate;
     qlPredicateDefs: import("@adaptabletools/adaptable/src/parser/src/predicate/types").QlPredicateDef[];
     columnFilter: ColumnFilter;

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.js

@@ -6,7 +6,7 @@ import { getCurrentLayoutSelector } from '../../../Redux/ActionsReducers/LayoutR
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { useAdaptable } from '../../AdaptableContext';
 import { mapAdaptablePredicateDefToQlPredicateDef, mapColumnFilterToQlPredicate, mapQlPredicateToAdaptablePredicate, } from './utils';
-export const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
+export const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOverride) => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const api = adaptable.api;
@@ -23,7 +23,7 @@ export const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
         return currentLayout?.ColumnFilters?.find((cf) => cf.ColumnId === columnId);
     }, [currentLayout?.ColumnFilters, columnId]);
     const qlPredicate = column
-        ? mapColumnFilterToQlPredicate(columnFilter, column, qlPredicateDefs, columnFilterOptions, api)
+        ? mapColumnFilterToQlPredicate(columnFilter, column, qlPredicateDefs, columnFilterOptions, filterComponent, api)
         : null;
     const handleOnChange = (adaptablePredicate, logic = 'AND') => {
         // make sure we always have the latest columnFiler

package/src/View/Components/ColumnFilter/utils.d.ts

@@ -1,8 +1,8 @@
 import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
-import { AdaptableApi, AdaptableColumn, AdaptablePredicate, AdaptablePredicateDef, ColumnFilter, ColumnFilterOptions, ExpressionFunctionInputType } from '../../../types';
+import { AdaptableApi, AdaptableColumn, AdaptableFilterComponentLocation, AdaptablePredicate, AdaptablePredicateDef, ColumnFilter, ColumnFilterOptions, ExpressionFunctionInputType } from '../../../types';
 export declare const mapAdaptablePredicateDefToQlPredicateDef: (adaptablePredicateDef: AdaptablePredicateDef, dataType: ExpressionFunctionInputType) => QlPredicateDef;
 export declare const mapAdaptablePredicateToQlPredicate: (adaptablePredicate: AdaptablePredicate) => QlPredicate;
 export declare const mapQlPredicateToAdaptablePredicate: (qlPredicate: QlPredicate) => AdaptablePredicate;
 export declare const qlPredicateToString: (qlPredicate: QlPredicate, predicateDefs: QlPredicateDef[]) => string;
 export declare const isPredicateEmpty: (predicate: QlPredicate, predicateDef: QlPredicateDef) => boolean;
-export declare const mapColumnFilterToQlPredicate: (columnFilter: ColumnFilter, abColumn: AdaptableColumn, qlPredicateDefs: QlPredicateDef[], columnFilterOptions: ColumnFilterOptions, api: AdaptableApi) => QlPredicate;
+export declare const mapColumnFilterToQlPredicate: (columnFilter: ColumnFilter, abColumn: AdaptableColumn, qlPredicateDefs: QlPredicateDef[], columnFilterOptions: ColumnFilterOptions, filterComponent: AdaptableFilterComponentLocation, api: AdaptableApi) => QlPredicate;