@adaptabletools/adaptable 11.0.9 → 11.1.0

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -21,61 +21,12 @@ const PivotList_1 = require("./PivotList");
 const ButtonInfo_1 = require("../../../Components/Buttons/ButtonInfo");
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const ColumnLabels_1 = require("./ColumnLabels");
 const verticalPanelStyle = {
     minHeight: 150,
-    flex: '1 0 auto',
     overflow: 'auto',
 };
 const ListPanel = (props) => (React.createElement(Panel_1.default, Object.assign({ variant: "modern", bodyProps: { padding: 0 }, style: Object.assign(Object.assign({}, verticalPanelStyle), props.style) }, props)));
-const ColumnLabels = (props) => {
-    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
-    const labelNames = [
-        'Aggregatable',
-        'Filterable',
-        'Groupable',
-        'Moveable',
-        'Pivotable',
-        'Sortable',
-    ];
-    const labels = labelNames.map((name) => columnProperties[name.toLocaleLowerCase()] ? name.charAt(0) : '');
-    const flexProps = {
-        [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
-    };
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
-        showTitle ? React.createElement(rebass_1.Text, { mr: 2 }, "Behaviours:") : null,
-        labels.map((l, index) => {
-            const enabled = !!l;
-            const labelName = labelNames[index];
-            const letter = labelName.charAt(0);
-            const renderBox = (enabled, key) => {
-                return (React.createElement(rebass_1.Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
-                        overflow: 'hidden',
-                        cursor: 'auto',
-                        position: 'relative',
-                        fontWeight: 600,
-                        lineHeight: 0,
-                        border: `1px solid var(--ab-color-${enabled ? 'accent' : 'inputborder'})`,
-                        borderRadius: 'var(--ab__border-radius)',
-                        opacity: enabled ? 1 : 0.5,
-                    }, key: `${letter}${key ? key : ''}` },
-                    !enabled ? (React.createElement("div", { style: {
-                            background: 'currentColor',
-                            position: 'absolute',
-                            bottom: '-100%',
-                            right: 0,
-                            width: 2,
-                            height: '200%',
-                            transform: 'skewX(45deg)',
-                        } })) : null,
-                    letter));
-            };
-            return (React.createElement(rebass_1.Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
-                renderBox(enabled),
-                showBoth ? renderBox(!enabled, 'label') : null,
-                labelsProp ? (React.createElement(rebass_1.Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
-        }),
-        children));
-};
 function areEqual(_prevProps, _nextProps) {
     /*
      * For now we don't need updates from the parent - the initial layout we receive on mount is enough
@@ -297,7 +248,7 @@ exports.LayoutEditor = React.memo((props) => {
                                         whiteSpace: 'nowrap',
                                     }, onChange: setColumnVisibility.bind(null, c) }, "Visible")),
                             React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "column" },
-                                React.createElement(ColumnLabels, { showTitle: true, sortable: c.sortable, filterable: c.filterable, moveable: c.moveable, pivotable: c.pivotable, groupable: c.groupable, aggregatable: c.aggregatable }, ' '),
+                                React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: true, sortable: c.sortable, filterable: c.filterable, moveable: c.moveable, pivotable: c.pivotable, groupable: c.groupable, aggregatable: c.aggregatable }, ' '),
                                 React.createElement(rebass_1.Flex, { flexDirection: "row", mt: 2 },
                                     React.createElement(rebass_1.Flex, { flex: 3, alignItems: "baseline" },
                                         React.createElement(rebass_1.Text, { fontSize: 3, mr: 2 }, "Header:"),
@@ -415,21 +366,5 @@ exports.LayoutEditor = React.memo((props) => {
                                 React.createElement(icons_1.Icon, { name: "clear" }))));
                     }, getItemStyle: (columnId, snapshot, draggableStyle) => {
                         return getItemStyle_1.getItemStyle(allColumnsMap[columnId], layout, state.dragSource, snapshot, draggableStyle);
-                    } })),
-            React.createElement(ListPanel, { header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {
-                    gridRow: '1 /1',
-                    gridColumn: '3/3',
-                }, bodyProps: {
-                    padding: 2,
-                    backgroundColor: 'defaultbackground',
-                    color: 'text-on-defaultbackground',
-                } },
-                React.createElement(ColumnLabels, { flexDirection: "column", showBoth: true, labels: {
-                        Sortable: 'Able to be sorted',
-                        Filterable: 'Can be filtered',
-                        Aggregatable: 'Shows aggregations (in grouped rows)',
-                        Groupable: 'Can form a row group',
-                        Moveable: 'Is draggable and movable',
-                        Pivotable: 'Eligible for pivoting',
-                    }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })))));
+                    } })))));
 }, areEqual);

package/src/View/Layout/Wizard/LayoutEditorWizard.d.ts

@@ -3,6 +3,7 @@ import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Inte
 import { Layout } from '../../../PredefinedConfig/LayoutState';
 export interface LayoutEditorWizardProps extends AdaptableWizardStepProps<Layout> {
     Layouts: Layout[];
+    onLayoutChange?: (layout: Layout) => void;
 }
 export interface LayoutEditorWizardState {
     layoutName: string;

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

@@ -8,6 +8,10 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const LayoutEditor_1 = require("./LayoutEditor");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const ColumnLabels_1 = require("./LayoutEditor/ColumnLabels");
 class LayoutEditorWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -35,11 +39,13 @@ class LayoutEditorWizard extends React.Component {
             return ErrorMessage;
         };
         this.updateLayout = (layout) => {
+            var _a, _b;
             const updatedLayout = Object.assign(Object.assign({}, this.state.layout), layout);
             Object.assign(this.props.data, updatedLayout);
             this.setState({
                 layout: updatedLayout,
             });
+            (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onLayoutChange) === null || _b === void 0 ? void 0 : _b.call(_a, updatedLayout);
         };
         this.onLayoutChange = (layout) => {
             layout = Object.assign(Object.assign({}, layout), { Name: this.state.layoutName });
@@ -64,14 +70,36 @@ class LayoutEditorWizard extends React.Component {
         };
     }
     render() {
-        return (React.createElement("div", { "data-name": 'layout-editor', style: { flex: 1, overflow: 'auto' } },
+        return (React.createElement("div", { "data-name": 'layout-editor', style: { height: '100%' } },
             React.createElement(WizardPanel_1.default, { bodyProps: { padding: 0 } },
-                React.createElement(FormLayout_1.default, { columns: ['label', 'children'], m: 2, width: "30rem" },
-                    React.createElement(FormLayout_1.FormRow, { label: "Layout Name" },
-                        React.createElement(Input_1.default, { value: this.state.layoutName, "data-name": "layout-editor-name-input", width: "100%", autoFocus: true, placeholder: "Type a name", onChange: this.onLayoutNameChange }),
-                        ' '),
-                    this.state.errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(ErrorBox_1.default, null, this.state.errorMessage))) : null),
+                React.createElement(rebass_1.Flex, null,
+                    React.createElement(rebass_1.Box, { width: 350 },
+                        React.createElement(FormLayout_1.default, { columns: ['label', 'children'], m: 2 },
+                            React.createElement(FormLayout_1.FormRow, { label: "Layout Name" },
+                                React.createElement(Input_1.default, { value: this.state.layoutName, "data-name": "layout-editor-name-input", width: "100%", autoFocus: true, placeholder: "Type a name", onChange: this.onLayoutNameChange }),
+                                ' '),
+                            this.state.errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
+                                React.createElement(ErrorBox_1.default, null, this.state.errorMessage))) : null)),
+                    React.createElement(rebass_1.Flex, { flex: 1, pr: 2, alignItems: "center", justifyContent: "end" },
+                        React.createElement(rebass_1.Text, { mr: 2 }, "Legend"),
+                        React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, bodyText: [
+                                React.createElement(Panel_1.default, { variant: "modern", header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {
+                                        gridRow: '1 /1',
+                                        gridColumn: '3/3',
+                                    }, bodyProps: {
+                                        padding: 2,
+                                        backgroundColor: 'defaultbackground',
+                                        color: 'text-on-defaultbackground',
+                                    } },
+                                    React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "column", showBoth: true, labels: {
+                                            Sortable: 'Able to be sorted',
+                                            Filterable: 'Can be filtered',
+                                            Aggregatable: 'Shows aggregations (in grouped rows)',
+                                            Groupable: 'Can form a row group',
+                                            Moveable: 'Is draggable and movable',
+                                            Pivotable: 'Eligible for pivoting',
+                                        }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
+                            ] }))),
                 React.createElement(LayoutEditor_1.LayoutEditor, { api: this.props.api, layout: this.state.layout, onLayoutChange: this.onLayoutChange }))));
     }
     canNext() {

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -4,7 +4,6 @@ exports.SystemStatusEntityRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const EntityRowItem_1 = require("../Components/EntityRowItem");
 const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Helper_1 = require("../../Utilities/Helpers/Helper");
@@ -25,7 +24,7 @@ class SystemStatusEntityRow extends React.Component {
                 " ",
                 systemStatus.statusFurtherInformation ? '...' : ''),
             systemStatus.statusFurtherInformation ? (React.createElement(rebass_1.Box, { margin: 2, style: { whiteSpace: 'normal' } }, systemStatus.statusFurtherInformation)) : null)) : null;
-        colItems[1].Content = React.createElement(EntityRowItem_1.EntityRowItem, { Content: systemStatus.timestamp.toLocaleString() });
+        colItems[1].Content = systemStatus.timestamp.toLocaleString();
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
     }
 }

package/src/agGrid/Adaptable.d.ts

@@ -1,4 +1,4 @@
-import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, GridReadyEvent, Module, RowNode, ValueGetterParams, ValueSetterParams } from '@ag-grid-community/all-modules';
+import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, RowNode, ValueGetterParams, ValueSetterParams } from '@ag-grid-community/all-modules';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
@@ -178,6 +178,7 @@ export declare class Adaptable implements IAdaptable {
     forAllRowNodesDo(func: (rowNode: RowNode) => void): void;
     forAllVisibleRowNodesDo(func: (rowNode: RowNode, rowIndex: number) => void): void;
     getVisibleRowNodes(): RowNode[];
+    getRowsInViewport(): RowNode[];
     selectNodes(rowNodes: RowNode[], clearSelection: boolean): void;
     deSelectNodes(rowNodes: RowNode[], clearSelection: boolean): void;
     selectNode(rowNode: RowNode, clearSelection: boolean): void;
@@ -187,6 +188,7 @@ export declare class Adaptable implements IAdaptable {
     redrawBody(): void;
     redrawHeader(): void;
     redrawRow(rowNode: RowNode): void;
+    redrawRows(rowNodes: RowNode[]): void;
     refreshCells(rowNodes: RowNode[], columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
     jumpToRow(rowNode: RowNode): void;
     jumpToColumn(columnId: string): void;
@@ -241,6 +243,7 @@ export declare class Adaptable implements IAdaptable {
     getAdaptableContainerElement(): HTMLElement | null;
     getAgGridContainerElement(): HTMLElement | null;
     private initInternalGridLogic;
+    private updateColumnFilterActiveState;
     buildStandaloneColumnHeader(adaptableColumn: AdaptableColumn): AdaptableMenuItem[];
     prepareGrid(): void;
     setupColumns(): void;
@@ -360,5 +363,4 @@ export declare class AdaptableNoCodeWizard implements IAdaptableNoCodeWizard {
     constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions);
     render(container?: HTMLElement | null): void;
 }
-export declare const bindAdaptableAgGrid: (gridReadyEvent: GridReadyEvent, gridOptions: GridOptions) => void;
 export {};

package/src/agGrid/Adaptable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bindAdaptableAgGrid = exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
+exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
 const tslib_1 = require("tslib");
 const all_modules_1 = require("@ag-grid-community/all-modules");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
@@ -316,13 +316,6 @@ class Adaptable {
         this.runtimeConfig = runtimeConfig || {};
         this.agGridModules = this.runtimeConfig.modules || [];
         this.gridOptions = this.adaptableOptions.gridOptions;
-        if (this.hasAutogeneratedPrimaryKey() && !this.gridOptions.getRowNodeId) {
-            this.gridOptions.getRowNodeId = (rowData) => {
-                var _a;
-                rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN] = (_a = rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN]) !== null && _a !== void 0 ? _a : Uuid_1.createUuid();
-                return rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN];
-            };
-        }
         if (this.gridOptions.allowContextMenuWithControlKey === undefined) {
             this.gridOptions.allowContextMenuWithControlKey = true;
         }
@@ -517,7 +510,7 @@ class Adaptable {
         LoggingHelper_1.LogAdaptableInfo(`Initializing AgGrid...`);
         // set up whether we use the getRowNode method or loop when finding a rowNode (former is preferable)
         // can only do that here as the gridOptions not yet set up
-        this.useRowNodeLookUp = this.agGridHelper.TrySetUpNodeIds();
+        this.useRowNodeLookUp = this.agGridHelper.TrySetUpNodeIds(this.hasAutogeneratedPrimaryKey());
         if (Array.isArray(this.gridOptions.columnDefs)) {
             this.gridOptions.columnDefs.forEach(assignColId);
         }
@@ -850,32 +843,10 @@ class Adaptable {
         return style;
     }
     getActiveAlertWithHighlightCell(col, params) {
-        const activeAlerts = this.api.internalApi
-            .getAdaptableAlerts()
-            .filter((alert) => {
-            var _a;
-            return ((_a = alert.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightCell) &&
-                alert.dataChangedInfo &&
-                alert.dataChangedInfo.column &&
-                alert.dataChangedInfo.column.columnId === col.columnId &&
-                alert.dataChangedInfo.rowNode === params.node;
-        });
-        if (!activeAlerts.length) {
-            return null;
-        }
-        return activeAlerts === null || activeAlerts === void 0 ? void 0 : activeAlerts[0];
+        return this.api.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
     }
     getActiveAlertWithHighlightRow(params) {
-        var _a;
-        return (_a = this.api.internalApi
-            .getAdaptableAlerts()
-            .filter((alert) => {
-            var _a;
-            return ((_a = alert.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightRow) &&
-                alert.dataChangedInfo &&
-                alert.dataChangedInfo.column &&
-                alert.dataChangedInfo.rowNode === params.node;
-        })) === null || _a === void 0 ? void 0 : _a[0];
+        return this.api.internalApi.getAdaptableAlertWithHighlightRow(params.node);
     }
     getAlertCellStyle(col, params) {
         const alert = this.getActiveAlertWithHighlightCell(col, params);
@@ -1062,12 +1033,15 @@ class Adaptable {
     }
     getPrimaryKeyValueFromRowNode(rowNode) {
         var _a;
+        if (!rowNode) {
+            return null;
+        }
         let gridApi = this.getGridOptionsApi();
         let result;
         if (gridApi && !this.hasAutogeneratedPrimaryKey()) {
             result = gridApi.getValue(this.adaptableOptions.primaryKey, rowNode);
         }
-        if ((result === null || result == undefined) && rowNode && rowNode.data) {
+        if ((result === null || result == undefined) && rowNode.data) {
             result = (_a = rowNode.data[this.adaptableOptions.primaryKey]) !== null && _a !== void 0 ? _a : null;
         }
         return result;
@@ -1282,10 +1256,13 @@ class Adaptable {
             shouldUpdateHeaders = this.setupColumnHeader(colSetupInfo) || shouldUpdateHeaders;
         });
         isChanged = isChanged || shouldUpdateHeaders;
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues) &&
-            this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts() &&
+            ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues)) {
             this.expandRowGroupsForValues(layout.ExpandedRowGroupValues);
         }
+        if (this.adaptableOptions.layoutOptions.displayRowGroups === 'expanded') {
+            this.expandAllRowGroups();
+        }
         if (isChanged) {
             // it's important we set pivot mode
             // before we set column state
@@ -1404,7 +1381,7 @@ class Adaptable {
         }
         layout.EnablePivot = this.gridOptions.columnApi.isPivotMode();
         layout.PivotColumns = pivotColumns;
-        if (this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts()) {
             layout.ExpandedRowGroupValues = this.getExpandRowGroupsKeys();
         }
         //  this.api.layoutApi.fireLayoutUpdatedEvent(layout, 'UpdatedLayout');
@@ -1895,6 +1872,9 @@ class Adaptable {
         });
         return rowNodes;
     }
+    getRowsInViewport() {
+        return this.gridOptions.api.getRenderedNodes();
+    }
     selectNodes(rowNodes, clearSelection) {
         if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(rowNodes)) {
             rowNodes.forEach((node) => this.selectNode(node, clearSelection));
@@ -1945,19 +1925,17 @@ class Adaptable {
         this.gridOptions.api.refreshHeader();
     }
     redrawRow(rowNode) {
-        // in order to get a fresh reference to rowNode
-        // rowNode = this.getRowNodeForPrimaryKey(this.getPrimaryKeyValueFromRowNode(rowNode));
-        // if (!rowNode) {
-        //   return;
-        // }
+        this.redrawRows([rowNode]);
+    }
+    redrawRows(rowNodes) {
         const redrawRowsParams = {
-            rowNodes: [rowNode],
+            rowNodes,
         };
         try {
             this.gridOptions.api.redrawRows(redrawRowsParams);
         }
         catch (ex) {
-            LoggingHelper_1.ConsoleLogError('ag-grid redrawRows was unable to find some row nodes. Tried to redraw row node: ', rowNode, ex);
+            LoggingHelper_1.ConsoleLogError('ag-grid redrawRows was unable to find some row nodes. Tried to redraw row nodes: ', rowNodes, ex);
         }
     }
     refreshCells(rowNodes, columns, forceUpdate, suppressFlash = false) {
@@ -2589,26 +2567,22 @@ class Adaptable {
         this.gridOptions.isExternalFilterPresent = () => {
             const columnFilters = this.api.filterApi.getAllColumnFilter();
             const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
-            if (isFilterActive) {
-                // used in particular at init time to show the filter icon correctly
-                for (const colFilter of columnFilters) {
-                    const agGridCol = this.gridOptions.columnApi.getColumn(colFilter.ColumnId);
-                    if (agGridCol && !agGridCol.isFilterActive()) {
-                        agGridCol.setFilterActive(true);
-                    }
-                }
-            }
-            else {
-                (this.gridOptions.columnApi.getAllColumns() || []).forEach((col) => {
-                    if (col.isFilterActive()) {
-                        col.setFilterActive(false);
-                    }
-                });
-            }
             const isQueryActive = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.api.queryApi.getCurrentQuery());
-            // it means that originaldoesExternalFilterPass will be called so we reinit that collection
+            /**
+             * Changing the column filterState sync breaks the rendering of the custom filter component.
+             * I think that changing the column definition while ag-grid determines if a column is filtered
+             * breaks the logic of the custom component.
+             *
+             * Result:
+             * - custom filters in sate
+             * - refresh page, the ag-grid filter is rendered instead of adaptable custom-filter-component.
+             */
+            requestAnimationFrame(() => {
+                this.updateColumnFilterActiveState();
+            });
             return (isFilterActive ||
                 isQueryActive ||
+                // it means that originaldoesExternalFilterPass will be called so we reinit that collection
                 (originalisExternalFilterPresent ? originalisExternalFilterPresent() : false));
         };
         const originaldoesExternalFilterPass = this.gridOptions.doesExternalFilterPass;
@@ -2660,6 +2634,26 @@ class Adaptable {
         };
         this.prepareGrid();
     }
+    updateColumnFilterActiveState() {
+        const columnFilters = this.api.filterApi.getAllColumnFilter();
+        const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
+        if (isFilterActive) {
+            // used in particular at init time to show the filter icon correctly
+            for (const colFilter of columnFilters) {
+                const agGridCol = this.gridOptions.columnApi.getColumn(colFilter.ColumnId);
+                if (agGridCol && !agGridCol.isFilterActive()) {
+                    agGridCol.setFilterActive(true);
+                }
+            }
+        }
+        else {
+            (this.gridOptions.columnApi.getAllColumns() || []).forEach((col) => {
+                if (col.isFilterActive()) {
+                    col.setFilterActive(false);
+                }
+            });
+        }
+    }
     buildStandaloneColumnHeader(adaptableColumn) {
         return this.agGridMenuHelper.buildStandaloneColumnHeader(adaptableColumn);
     }
@@ -2869,6 +2863,7 @@ class Adaptable {
     setupColumnCellEditor({ colId, col }) {
         const adaptableColumn = this.api.columnApi.getColumnFromId(colId);
         const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(adaptableColumn);
+        const hasRichSelectCellEditor = this.isModulePresent('rich-select');
         this.setColDefProperty(col, 'cellEditor', () => {
             var _a;
             const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(adaptableColumn);
@@ -2876,9 +2871,14 @@ class Adaptable {
                 return CheckboxRenderer_1.CheckboxEditor;
             }
             if (editLookUpItem) {
-                return this.isModulePresent('rich-select')
-                    ? 'agRichSelectCellEditor'
-                    : 'agSelectCellEditor';
+                return hasRichSelectCellEditor ? 'agRichSelectCellEditor' : 'agSelectCellEditor';
+            }
+        });
+        this.setColDefProperty(col, 'cellEditorPopup', () => {
+            // as specified in https://www.ag-grid.com/react-data-grid/provided-cell-editors/#rich-select-cell-editor
+            // agRichSelectCellEditor should always set cellEditorPopup=true. Otherwise the editor will be clipped to the cell contents
+            if (editLookUpItem && hasRichSelectCellEditor) {
+                return true;
             }
         });
         this.setColDefProperty(col, 'cellEditorParams', (params) => {
@@ -3429,7 +3429,7 @@ class Adaptable {
     }
     getExpandRowGroupsKeys() {
         let returnValues = [];
-        if (this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts()) {
             this.gridOptions.api.forEachNode((node) => {
                 if (node.group && node.expanded) {
                     let current = node;
@@ -4307,7 +4307,3 @@ class AdaptableNoCodeWizard {
     }
 }
 exports.AdaptableNoCodeWizard = AdaptableNoCodeWizard;
-exports.bindAdaptableAgGrid = (gridReadyEvent, gridOptions) => {
-    gridOptions.api = gridReadyEvent.api;
-    gridOptions.columnApi = gridReadyEvent.columnApi;
-};

package/src/agGrid/agGridHelper.d.ts

@@ -20,7 +20,7 @@ export declare class agGridHelper {
     getAgGridLightThemeName(): string;
     getAgGridDarkThemeName(): string;
     setUpModules(): Map<AdaptableModule, IModule>;
-    TrySetUpNodeIds(): boolean;
+    TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
     createPercentBarRendererComp(formatColumn: FormatColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;

package/src/agGrid/agGridHelper.js

@@ -39,6 +39,7 @@ const FlashingCellModule_1 = require("../Strategy/FlashingCellModule");
 const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
+const Helper_1 = require("../Utilities/Helpers/Helper");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -99,21 +100,35 @@ class agGridHelper {
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
         return modules;
     }
-    TrySetUpNodeIds() {
+    TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(this.adaptable.adaptableOptions.primaryKey)) {
             // if no valid pk then always false
             return false;
         }
-        // need some way of checking if running on client on server: if on server then we return false
-        if (this.gridOptions.getRowNodeId != null) {
+        if (Helper_1.Helper.objectExists(this.gridOptions.getRowNodeId) ||
+            Helper_1.Helper.objectExists(this.gridOptions.getRowId)) {
+            // if the user provided a getRowNodeId/getRowId then we don't need to do anything
+            // Note: starting with 27.1.0 'getRowNodeId' method is deprecated and will be removed in future versions
             return true;
         }
-        // also we can check if they have done it
         const primaryKey = this.adaptable.adaptableOptions.primaryKey;
-        // otherwise lets set the Id so that it returns the primaryKey
-        this.gridOptions.getRowNodeId = function (data) {
-            return data[primaryKey];
-        };
+        if (hasAutogeneratedPrimaryKey) {
+            this.gridOptions.getRowId = (params) => {
+                // if the PK value is autogenerated, we need to make sure that the rowData has a valid PK value
+                // this should be taken care of in the Adaptable.[loadDataSource/setDataSource/updateRows]() methods, but the users will always make silly decisions
+                // so just to be safe we'll check here and add a PK value is missing
+                // thus adding a side-effect in a getter, but what can we do against it?! :)
+                if (Helper_1.Helper.objectNotExists(params.data[primaryKey])) {
+                    params.data[primaryKey] = Uuid_1.createUuid();
+                }
+                return params.data[primaryKey];
+            };
+        }
+        else {
+            this.gridOptions.getRowId = (params) => {
+                return params.data[primaryKey];
+            };
+        }
         return true;
     }
     createCheckboxRendererComp(columnId, isColumnReadOnly) {

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -117,7 +117,7 @@ class AdaptableDateEditor {
         react_dom_1.unmountComponentAtNode(this.el);
     }
     shouldClearExistingValue(params) {
-        return params.key === all_modules_1.KeyCode.BACKSPACE || params.key === all_modules_1.KeyCode.DELETE;
+        return params.eventKey === all_modules_1.KeyCode.BACKSPACE || params.eventKey === all_modules_1.KeyCode.DELETE;
     }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -93,7 +93,7 @@ class AdaptableNumberEditor {
         react_dom_1.unmountComponentAtNode(this.el);
     }
     shouldClearExistingValue(params) {
-        return params.key === all_modules_1.KeyCode.BACKSPACE || params.key === all_modules_1.KeyCode.DELETE;
+        return params.eventKey === all_modules_1.KeyCode.BACKSPACE || params.eventKey === all_modules_1.KeyCode.DELETE;
     }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/components/Dialog/index.js

@@ -105,7 +105,7 @@ exports.Dialog = React.forwardRef((props, ref) => {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(rebass_1.Box, Object.assign({ tabIndex: 0 }, boxProps, { onClick: (e) => {
+    const box = (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { onClick: (e) => {
             setPreventDismissFlag(e);
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);

package/src/components/Modal/index.js

@@ -32,7 +32,7 @@ exports.Modal = (props) => {
     const counter = react_1.useMemo(() => globalCounter++, [isOpen]);
     const openTimestamp = counter;
     const backdropZIndexOffset = props.backdropZIndexOffset || 1;
-    const zIndex = (props.baseZIndex || 1000) + counter;
+    const zIndex = (props.baseZIndex || 2000) + counter;
     return react_dom_1.createPortal(isOpen ? (React.createElement(React.Fragment, null,
         React.createElement(Backdrop_1.default, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }),
         React.createElement(react_remove_scroll_1.RemoveScroll, null,

package/src/components/WindowModal/WindowModal.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
+export declare type WindowModalSize = {
+    width: number;
+    height: number;
+};
+export declare type WindowModalPosition = {
+    x: number;
+    y: number;
+};
 export interface WindowModalProps {
     handleSelector: string;
-    size: {
-        width: number;
-        height: number;
-    };
-    position?: {
-        x: number;
-        y: number;
-    };
+    size: WindowModalSize;
+    position?: WindowModalPosition;
     onChange: (settings: {
         size: {
             width: number;

package/src/components/WindowModal/WindowModal.js

@@ -7,6 +7,7 @@ const re_resizable_1 = require("re-resizable");
 const useDraggable_1 = tslib_1.__importDefault(require("../utils/useDraggable"));
 const UIHelper_1 = require("../../View/UIHelper");
 const react_dom_1 = require("react-dom");
+const useStacking_1 = require("./useStacking");
 let portalElement;
 const ensurePortalElement = () => {
     if (!UIHelper_1.isBrowserDocumentAvailable()) {
@@ -43,6 +44,7 @@ exports.WindowModal = (props) => {
     ensurePortalElement();
     const positionDeltaRef = React.useRef(null);
     const positionRef = React.useRef(props.position);
+    const stacking = useStacking_1.useStacking();
     /**
      * This is needed because the function called in onDrop is saved when
      * it gets attached to the DOM element event handler.
@@ -50,7 +52,7 @@ exports.WindowModal = (props) => {
      */
     positionRef.current = props.position;
     const style = {
-        zIndex: 1000,
+        zIndex: stacking.zIndex,
         position: 'absolute',
         left: props.position.x,
         top: props.position.y,
@@ -97,7 +99,7 @@ exports.WindowModal = (props) => {
     }, []);
     return react_dom_1.createPortal(React.createElement("div", { style: style, 
         //@ts-ignore
-        ref: targetRef },
+        ref: targetRef, onMouseDown: stacking.bringInFront },
         React.createElement(re_resizable_1.Resizable, { onResizeStop: handleResizeStop, onResize: handleResize, bounds: "window", defaultSize: {
                 width: props.size.width,
                 height: props.size.height,